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

Question

我在点击元素后将菜单设置为.hide()时遇到问题。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

当您点击菜单中的ul个元素之一时以及{{1}时，我试图将下拉菜单（.hide()元素）设为li来自mouseleave的1}}。现在，只有ul部分工作，而不是当您点击其中一个mouseleave元素时。我不确定我忽略了什么，所以如果您发现任何错误或问题，请告诉我。

Here's the link to my fiddle

Answer 1

点击li传播到ul的事件，那么点击li关闭列表但点击了＆＃39;在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;
});