修改JQuery select样式UL以在没有BootstrapJS的情况下工作

Question

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

我想修改这个select样式的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 .dropdown-menu").hide();
$(".select-list").click(function () {
    $(".select-list .dropdown-menu").show();
});
$(".select-list .dropdown-menu").mouseleave(function(){
    $(this).hide();
});

Answer 2

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>

Answer 3

$(".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();
 }  

});