用div+css+jquery模拟select下拉菜单效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

为什么要模拟select下拉菜单效果

默认select下拉菜单样式控制非常麻烦，想要做一个漂亮的select效果更是难上难，所以使用div+css+jquery模拟select下拉菜单效果，比默认的Select更漂亮，样式也更好设计。

关键技术点

  • .option下拉列表使用绝对定位.

  • 点击.select_box实现下拉收缩效果

  • 点击option内容实现赋值功能

  • 如果option处于展开状态 点击body除select_box部分 option将关闭

关键代码与说明

<script type="text/javascript">

    //模拟select下拉收缩效果
    $(".select_box").click(function (event) {
        //阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。
        event.stopPropagation();
        //用于切换被选元素的 hide() 与 show()
        $(this).find(".option").toggle();
        $(this).parent().siblings().find(".option").hide();
    });

    //点击option内容实现赋值功能
    $(".option a").click(function () {
        var value = $(this).text();
        $(this).parent().siblings(".selet_open").text(value);
        $("#select_value").val(value)
    });

    //如果option处于展开状态 点击body除select_box部分 option将关闭
    $(document).click(function (event) {
        var eo = $(event.target);
        if ($(".select_box").is(":visible") && eo.attr("class") != "option" && !eo.parent(".option").length)
            $('.option').hide();
    });
    </script>