javascript - jquery 子菜单 : li items still toggling

Question

几个小时以来，我一直在努力解决这个问题，因为我对 jQuery 本身还很陌生，而且我仍然是初学者，所以我真的需要一些帮助。我尝试创建一个带有子菜单的导航。一切都按预期工作，但我错过了阻止子菜单列表项切换的方法。

HTML:

<nav>
      <ul id="site-nav">
        <li><a href="#">Main Nav Item 1</a></li>
        <li><a href="#">Main Nav Item 2 (with submenu)</a>
          <ul>
            <li><a href="#">Submenu Item 1</a></li>
            <li><a href="#">Submenu Item 2</a></li>
            <li><a href="#">Submenu Item 3</a></li>
          </ul>
        </li>
        <li><a href="#">Main Nav Item 3 (with submenu)</a>
          <ul>
            <li><a href="#">Submenu Item 1</a></li>
            <li><a href="#">Submenu Item 2</a></li>
          </ul>
        </li>
        <li><a href="#">Main Nav Item 4</a></li>
        <li><a href="#">Main Nav Item 5</a></li>
      </ul>
    </nav>

JQuery(子菜单部分):

$(document).ready(function() {

  var subnavArrow = ['<div id="subnavArrow"></div>'];
      subpull     = $('header nav ul li');
      submenu     = $('header nav ul li ul');
      submenuitems = $('header nav ul li ul li');

  subpull.has('ul').prepend(subnavArrow);

  $('header nav ul li').has('ul').click(function() {
    $(this).children('ul').toggle('slow');
  });

});

如果你没听懂我的意思，我会尽量解释清楚:

我想在每次点击时打开 Main Nav Item 2 的子项(Main Nav Item 2)。这是按预期工作的，我也可以再次关闭它，但是如果我单击“主导航项 2”的子菜单项，它将关闭主导航项 2 的子菜单。

Answer 1

你可以检查你是否点击了anchor或div元素

$(document).ready(function() {

  var subnavArrow = ['<div id="subnavArrow"></div>'];
  subpull = $('header nav ul li');
  submenu = $('header nav ul li ul');
  submenuitems = $('header nav ul li ul li');

  subpull.has('ul').prepend(subnavArrow);

  $('header nav ul li').has('ul').click(function(e) {
    if ($(e.target).closest('li').is(this)) {
      $(this).children('ul').toggle('slow');
    }
  });

});

#subnavArrow:after {
  content: '<<'
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav>
    <ul id="site-nav">
      <li><a href="#">Main Nav Item 1</a>
      </li>
      <li><a href="#">Main Nav Item 2 (with submenu)</a>
        <ul>
          <li><a href="#">Submenu Item 1</a>
          </li>
          <li><a href="#">Submenu Item 2</a>
          </li>
          <li><a href="#">Submenu Item 3</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Main Nav Item 3 (with submenu)</a>
        <ul>
          <li><a href="#">Submenu Item 1</a>
          </li>
          <li><a href="#">Submenu Item 2</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Main Nav Item 4</a>
      </li>
      <li><a href="#">Main Nav Item 5</a>
      </li>
    </ul>
  </nav>
</header>