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

我的项目使用jquery1.7.2和jqueryui

我想修改此选择样式UL，使其在没有Bootstrap.JS的情况下工作：

我已经删除了引导依赖项&我正在这里进行试验：

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

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

如果选择了某些内容，或者用户在菜单外单击，如何再次隐藏UL？

您可以尝试：

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

css:

js:

html:

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

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

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

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

});