避免在单击子菜单项时关闭菜单

Question

这是一个多级菜单。当我点击"关于"链接时，它打开了包含3个链接的子菜单Johnny, Julie &杰米。

当我再次点击"关于"，它关闭了菜单。点击子菜单也会关闭菜单，这是我想避免的。

如何避免关闭打开的子菜单，如果我点击子菜单(约翰尼，朱莉&;杰米?

$('li.parent').click(function() {
  $(this).find('.sub-nav').toggleClass('visible');
});

#nav ul.sub-nav {
  display: none;
}
#nav ul.visible {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="nav">
  <li class="parent">About
    <ul class="sub-nav">
      <li><a href="#">Johnny</a>
      </li>
      <li><a href="#">Julie</a>
      </li>
      <li><a href="#">Jamie</a>
      </li>
    </ul>
  </li>
  <li class="parent">AnotherLink
    <ul class="sub-nav">
      <li><a href="#">Martin</a>
      </li>
      <li><a href="#">Rasmus</a>
      </li>
      <li><a href="#">Morten</a>
      </li>
    </ul>
  </li>
</ul>

Answer 1

对于子元素，stopPropagation的替代方法是添加一个小检查，如果被单击的元素是当前的(而不是它的后代):

$('li.parent').click(function(e) {
  if (this === e.target)
    $(this).find('.sub-nav').toggleClass('visible');
});

$('li.parent').click(function(e) {
  if (this === e.target)
    $(this).find('.sub-nav').toggleClass('visible');
});

#nav ul.sub-nav {
  display: none;
}
#nav ul.visible {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="nav">
  <li class="parent">About
    <ul class="sub-nav">
      <li><a href="#">Johnny</a>
      </li>
      <li><a href="#">Julie</a>
      </li>
      <li><a href="#">Jamie</a>
      </li>
    </ul>
  </li>
  <li class="parent">AnotherLink
    <ul class="sub-nav">
      <li><a href="#">Martin</a>
      </li>
      <li><a href="#">Rasmus</a>
      </li>
      <li><a href="#">Morten</a>
      </li>
    </ul>
  </li>
</ul>

Answer 2

您需要在子锚元素上设置事件的stopPropagation:

$("li.parent a").click(function(e) {
 e.stopPropagation();
});

Answer 3

您需要防止点击.sub-nav元素传输到您的事件处理程序:https://api.jquery.com/event.stoppropagation/