jquery - 修改 JQuery 选择样式的 UL 以在没有 BootstrapJS 的情况下工作

Question

我的项目使用 JQuery 1.7.2 & JQuery-UI。

我想修改这个 select-style UL 以在没有 Bootstrap.JS 的情况下工作：Select-style ul

我已经删除了 Bootstrap 依赖项并在这里进行了实验：Modified select-style ul

我添加了以下 JQuery 来隐藏和显示 ul 菜单，以模仿原始菜单的功能，如下所示：

$(".select-list .dropdown-menu").hide();
$(".select-list").click(function () {
    $(".select-list .dropdown-menu").show();
})

选择某些内容或用户在菜单外单击时，如何再次隐藏（） UL？

Answer 1

$(".select-list").click(function (event) {
    $(".select-list .dropdown-menu").toggle();    
    event.stopPropagation();
});

$(document).on('click', function(){
 if(!$(".select-list .dropdown-menu").is(':hidden'))
 {
        $(".select-list .dropdown-menu").hide();
 }  

});

Answer 2

你可以试试：

$(".select-list .dropdown-menu").hide();
$(".select-list").click(function () {
    $(".select-list .dropdown-menu").show();
});
$(".select-list .dropdown-menu").mouseleave(function(){
    $(this).hide();
});

Answer 3

CSS：

.select-list .dropdown-menu {
z-index: 1000;
}
.mask {
position: fixed;
width: 30000px;
height: 30000px;
z-index: 999;
}

js：

$(".select-list .dropdown-menu").hide();
$(".select-list").click(function () {
    $(".select-list .dropdown-menu").show();
    $("div.mask").show();
})
$(".dropdown-menu a").click(function(){
    $(".select-list .dropdown-menu").hide();
    $(".mask").hide();
});
$(".mask").click(function(){
    $(".select-list .dropdown-menu").hide();
    $(this).hide();
});

html:

<div class="mask"></div>