javascript - 如何仅在单击父级时发生事件，但在子级时不发生事件(向下两级)

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>