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

需要解决两个问题

当我点击菜单项容器内的复选框时，下拉列表不应该出现

当我在页面中的任何位置单击菜单外部时，下拉列表应该是隐藏的

这是我的JSFIDLE：

流动是我的代码

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

HTML






CSS
.check_下拉列表{
背景：#edecec；
填充：2px；
显示：内联块；
}
.leads_菜单{
显示：无；
位置：绝对位置；
颜色：#000；
光标：指针；
背景：#edecec；
}
jQuery
$（函数（）{
$（“.check_下拉列表”）。每个（函数（）{
if（$（this）.find（“.menu\u项”）.length>0）{
$（this.mousedown（function（））{
$（this）.find（“.leads_menu”）.stop（true，true）.slideToggle（）；
});          
}
});
});

这可能是您想要的

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

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

我已经更新了你的

$（函数（）{
$（“.菜单项”）。单击（功能（e）{
$（this）.sides（'.leads_menu'）.stop（true，true）.slideToggle（）；
e、 预防默认值（）；
});
});

您必须将事件绑定到文档或窗口，以捕获下拉列表外的下一次单击/鼠标向下以关闭它。 jquery为您提供了一个简单的方法，称为

我把你的小提琴换了，好让你看看。 此外，还必须防止mousedown事件的传播。否则，它将转到窗口对象并调用一个绑定的方法

---

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

如果单击的元素是复选框，则阻止显示下拉菜单

通过单击HTML网页中的任意位置来触发隐藏下拉列表

这些变化在JS级别：

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

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

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

    });
});