仅在单击父母时才进行事件，而不是在孩子(两个级别下降)时

Question

我正在做一个侧面菜单，当父 li 元素单击时，它会隐藏并揭示一个子菜单，而我几乎完成了。问题是，如果 li 单击两个级别(两个级别(，它也隐藏了子菜单。

父母应该是唯一能够触发事件的人。

在这里，您拥有HTML，CSS和JavaScript(jQuery(的简化版本：

$( document ).ready( function () {
  $( "li.has-submenu" ).on( 'click', function (e) {
    if( $("#submenu").hasClass( "hides" ) ){
      $("#submenu").slideDown().toggleClass( "hides" );
    } else {
      $("#submenu").slideUp().toggleClass( "hides" );
    }
  });
});

.hide {
  display: none;
}
#submenu {
  margin-left: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
    <li class="has-submenu">
      <a href="#">Overview </a>
      <ul id="submenu" class="nav hide">
        <li class="active">
          <a href="#">Overview </a>
        </li>
        <li>
          <a href="#">Account Settings </a>
        </li>
        <li>
          <a href="#">Tasks </a>
        </li>
        <li>
          <a href="#">
            Help </a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Account Settings </a>
    </li>
    <li>
      <a href="#">Tasks </a>
    </li>
    <li>
      <a href="#">Help </a>
    </li>
  </ul>

您知道如何解决此行为吗？

Answer 1

尝试在不想触发父的元素上使用.stopPropagation()函数：

$( document ).ready( function () {
  $( "li.has-submenu" ).on( 'click', function (e) {
    if( $("#submenu").hasClass( "hides" ) ){
      $("#submenu").slideDown().toggleClass( "hides" );
    } else {
      $("#submenu").slideUp().toggleClass( "hides" );
    }
  });
  
  $( "li.has-submenu li" ).click(function(e) {
        e.stopPropagation();
   });
});

.hide {
  display: none;
}
#submenu {
  margin-left: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
    <li class="has-submenu">
      <a href="#">Overview </a>
      <ul id="submenu" class="nav hide">
        <li class="active">
          <a href="#">Overview </a>
        </li>
        <li>
          <a href="#">Account Settings </a>
        </li>
        <li>
          <a href="#">Tasks </a>
        </li>
        <li>
          <a href="#">
            Help </a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Account Settings </a>
    </li>
    <li>
      <a href="#">Tasks </a>
    </li>
    <li>
      <a href="#">Help </a>
    </li>
  </ul>

Answer 2

使nav> li>显示一个块并在其中放置ID。这样，链接占用LI的整个宽度，当您单击它时，它不会影响子菜单，因为子菜单不在A元素

Answer 3

最简单的解决方案是移动关闭的 </li>标签，在它是<a>元素之后：

之后

$( document ).ready( function () {
  $( ".has-submenu" ).on( 'click', function (e) {
    if( $("#submenu").hasClass( "hides" ) ){
      $("#submenu").slideDown().toggleClass( "hides" );
    } else {
      $("#submenu").slideUp().toggleClass( "hides" );
    }
  });
});

.hide {
  display: none;
}
#submenu {
  margin-left: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
    <li class="has-submenu">
      <a href="#">Overview </a>
    </li>
      <ul id="submenu" class="nav hide">
        <li class="active">
          <a href="#">Overview </a>
        </li>
        <li>
          <a href="#">Account Settings </a>
        </li>
        <li>
          <a href="#">Tasks </a>
        </li>
        <li>
          <a href="#">
            Help </a>
        </li>
      </ul>
    <li>
      <a href="#">Account Settings </a>
    </li>
    <li>
      <a href="#">Tasks </a>
    </li>
    <li>
      <a href="#">Help </a>
    </li>
  </ul>