基于CSS / Javascript的下拉菜单。 onclick事件的问题

Question

单击某个元素后，获取菜单到.hide()时出现问题。

 $(document).on("click", "div.dropdown", function() { $(this).find("ul").show(0, function() { $(this).find("li").click(function() { var a = $(this).html(); $(this).parent().parent().find(".dropdown-title p").html(a); $(this).parent().hide(); //Onclick won't hide the UL }); $(this).mouseleave(function() { $(this).hide(); }); }); return false; }); 

 div.dropdown { margin: 0 20px 0 0; float: left; border-radius: 3px; background: rgba(0, 0, 0, .1); height: 50px; line-height: 50px; color: #999; text-transform: uppercase; position: relative; } div.dropdown div.dropdown-title { padding: 0 20px; display: inline-block; cursor: pointer; } div.dropdown div.dropdown-title p { margin: 0 20px 0 0; float: left; font-size: 12px; } div.dropdown div.dropdown-title span { float: left; } div.dropdown ul { position: absolute; top: 50px; left: 0; width: 200px; overflow-y: auto; overflow-x: hidden; border-radius: 0 0 3px 3px; z-index: 1001; border: 1px solid #ccc; list-style-type: none; padding: 0; margin: 0; } div.dropdown ul li { line-height: 32px; background: #fff; color: #999; font-size: 12px; white-space: nowrap; text-transform: uppercase; padding: 0 20px; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="dropdown"> <div class="dropdown-title"> <p>Sort By</p> <span><i class="fa fa-caret-down" aria-hidden="true"></i></span> </div> <ul style="display: none;"> <li>Option 1</li> <li>Option 2</li> <li>Option 3</li> <li>Option 4</li> <li>Option 5</li> <li>Option 6</li> <li>Option 7</li> <li>Option 8</li> </ul> </div> 

我试图让下拉菜单（在ul元素）到.hide()当你点击一个li在菜单元素，以及当你的mouseleave从ul 。 现在，只有mouseleave部分有效，而当您单击li元素之一时则无效。 我不确定自己所忽略的内容，因此，如果您发现任何错误或问题，请告诉我。

这是我的小提琴的链接

Answer 1

当单击li时，事件传播到ul，因此实际上发生的情况是，单击li会关闭列表，但再次单击ul会打开事件，您可以停止事件传播

$(document).on("click", "div.dropdown", function() {
    $(this).find("ul").show(0, function() {
        $(this).find("li").click(function(event) {
            event.stopPropagation();
            var a = $(this).html();
            $(this).parent().parent().find(".dropdown-title p").html(a);
            $(this).parent().hide(); //Onclick won't hide the UL
        });
        $(this).mouseleave(function() {
            $(this).hide();
        });
   });
   return false;
});