Question

我的项目使用JQuery 1.7.2＆amp; jQuery的UI。

我想修改这个选择风格的UL，以便在没有Bootstrap.JS的情况下工作：Select-style ul

我删除了Bootstrap依赖项＆amp;我在这里做实验：Modified select-style ul

我添加了以下JQuery来隐藏＆amp;显示ul菜单，模仿原文的功能，如下：

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

如果选择了某些内容，或者用户在菜单外点击，我怎样才能再次隐藏（）？

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

});

修改JQuery选择式UL，无需Bootstrap JS即可工作

3 个答案: