javascript - 基于 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>

当您单击其中一个 li 时，我尝试将下拉菜单(ul 元素)设置为 .hide()菜单中的元素，以及当您从 ul 中鼠标离开时。目前，只有 mouseleave 部分起作用，而当您单击其中一个 li 元素时则不起作用。我不确定我忽略了什么，所以如果您发现任何错误或问题，请告诉我。

Here's the link to my fiddle

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