Question

需要完成两个问题。

单击“菜单项”容器内的复选框时，不应显示下拉列表。
当我在页面的任何位置点击菜单外时，应隐藏下拉列表。

这是我的Jsfiddle：

流动是我的代码。

HTML
<div class="check_dropdown">
<input type="checkbox"> <a href="#" class="menu_item">Menu Item</a>
 <ul class="leads_menu">
  <li><a href="#">Sub Menu</a></li>
  <li><a href="#">Sub Menu</a></li>
  <li><a href="#">Sub Menu</a></li>
  <li><a href="#">Sub Menu</a></li>
 </ul>
</div>

CSS
.check_dropdown{
    background:#edecec;
    padding:2px;
    display:inline-block;
    }
.leads_menu {
    display: none;
    position:absolute;
    color: #000;
    cursor:pointer;
    background:#edecec;
}

jQuery
$(function() {
    $(".check_dropdown").each(function() {
        if ($(this).find(".menu_item").length > 0) {
            $(this).mousedown(function() {
                $(this).find(".leads_menu").stop(true, true).slideToggle();
            });          
        }
    });
});

Answer 1

我已更新您的小提琴（Click here）以检查以下内容：

如果点击的元素是复选框，则阻止显示下拉菜单。
点击HTML网页中的任意位置以触发下拉隐藏。

更改是在JS级别：http://jsfiddle.net/5FfgZ/3/

$(function() {
    var menuClicked = false; //Check if user opened the dropdown
    $(document).on('click', function(){
        if(menuClicked){
            menuClicked = false;   
            return;
        }
        if($(".leads_menu").css('display') != 'none'){
            $(".leads_menu").stop(true, true).slideToggle();
        }
    });
    $(".check_dropdown").each(function(e) {
        if ($(this).find(".menu_item").length > 0) {
            $(this).mousedown(function(e) {
                if($(e.target).attr('type') == 'checkbox') return; //Check if element clicked is a checkbox.
                $(this).find(".leads_menu").stop(true, true).slideToggle();
                menuClicked = true;
            });          
        }

    });
});

Answer 2

这可能是你想要的

$(document).click(function(){
 $(".leads_menu").hide();
});

$(".menu_item").click(function(e){
  e.stopPropagation();
});

Answer 3

我已更新您的fiddle with a working solution

<ul class="check_dropdown">
    <li>
        <input type="checkbox"> <a href="#" class="menu_item">Menu Item</a>
        <ul class="leads_menu">
            <li><a href="#">Sub Menu</a></li>
            <li><a href="#">Sub Menu</a></li>
            <li><a href="#">Sub Menu</a></li>
            <li><a href="#">Sub Menu</a></li>
        </ul>
    </li>
    <li>
        <input type="checkbox"> <a href="#" class="menu_item">Menu Item</a>
        <ul class="leads_menu">
            <li><a href="#">Sub Menu</a></li>
            <li><a href="#">Sub Menu</a></li>
        </ul>
    </li>
</ul>

$(function() {
  $(".menu_item").click(function(e) {
    $(this).siblings('.leads_menu').stop(true, true).slideToggle();
    e.preventDefault();
  });
});

Answer 4

您必须将事件绑定到文档或窗口以捕获下拉列表中的下一个单击/ mousedown以关闭它。 jquery为您提供了一个名为 one

的简单方法

$(window).one('mousedown', function() { ... });

我已经改变了你的小提琴，所以你可以看看它。你还必须阻止mousedown事件的传播。否则它会转到你的window-object并调用一个绑定的方法。

http://jsfiddle.net/5FfgZ/2/

下拉菜单链接显示/隐藏问题

4 个答案: