如果单击子菜单项，则避免关闭菜单 [英] avoid closing the menu if submenu items is clicked

问题描述

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

This is a multilevel menu. When i click the link "About" it opens the submenu which contains 3 links Johnny, Julie & Jamie.

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

When i click "About" again, it closes the menu. Clicking the submenu also closes the menu, and that i want to avoid.

如果我单击子菜单 (Johnny, Julie & Jamie)，如何避免关闭打开的子菜单?

How do i avoid closing the opened submenu, if i click the submenu (Johnny, Julie & Jamie) ?

$('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>

推荐答案

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

Alternative to stopPropagation approach for child elements would be adding a small check if the clicked element is the current one (and not it's descendants):

$('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>

这篇关于如果单击子菜单项，则避免关闭菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！