如何仅在单击父项时才有事件，但在子项时（两级向下）则不会

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()功能：

＆＃13;

＆＃13;

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

＆＃13;

.hide {
  display: none;
}

#submenu {
  margin-left: 15px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

将nav＆gt; li＆gt;设为显示块并将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>