jQuery 分割按钮（Split Button）

浏览数：17 / 时间：2015年06月09日

代码写多了，有些使用过的方法和技巧会一时半会想不起来，平日记录下来，方便自己和有需要的人日后查阅。

<html>
<head>
    <style type="text/css">
        div.searchButton
        {
            width: 68px;
            height: 24px;
            border: 1px solid #a8a8a8;
            font-family: 微软雅黑;
            color: #585959;
            font-size: 12px;
            line-height: 24px;
            text-align: center;
            cursor: pointer;
            float: left;
        }
        div.menuButton
        {
            width: 18px;
            height: 24px;
            border: 1px solid #a8a8a8;
            text-align: center;
            line-height: 24px;
            cursor: pointer;
            color: #d0d0d0;
            float: left;
            margin-left: 1px;
            font-size: 12px;
        }
        div.menuButton:hover
        {
            color: #000000;
        }
        div.menuButton.openMenuPanel
        {
            color: Orange;
        }
        div.menuPanel
        {
            width: 140px;
            height: 80px;
            border: 1px solid #a8a8a8;
            background-color: #ffffff;
            clear: both;
        }
        div.menuPanel div
        {
            width: 140px;
            height: 39px;
            font-family: 微软雅黑;
            color: #585959;
            font-size: 18px;
            line-height: 40px;
            text-align: center;
            border-bottom: 1px solid #a8a8a8;
            cursor: pointer;
        }
        div.menuPanel div:hover
        {
            background-color: #f1f1f1;
        }
        div.menuPanel div:last-child
        {
            border-bottom: none;
            height: 40px;
        }
    </style>
    <!-- 此处请引用jQuery和jQuery-ui库 -->
    <script type="text/javascript">
        $(function () {
            $(‘.menuButton‘).click(function () {
                $(this).addClass(‘openMenuPanel‘);
                $(‘.menuPanel‘).show();
                $(document).one(‘click‘, function () {
                    $(‘.menuPanel‘).hide();
                    $(‘.menuButton‘).removeClass(‘openMenuPanel‘);
                });
                return false;
            }).next().position({
                my: ‘left top‘,
                at: ‘left bottom‘,
                of: ‘.searchButton‘
            }).hide();

            $(‘.menuPanel‘).children(‘div‘).click(function () {
                $(‘.searchButton‘).html($.trim($(this).html()));
            });
        });
    </script>
</head>
<body>
    <div class="searchButton">
        选项-1
    </div>
    <div class="menuButton">
        ▼
    </div>
    <div class="menuPanel">
        <div>
            选项-1
        </div>
        <div>
            选项-2
        </div>
    </div>
</body>
</html>