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');
  });

});

如果你没有理解我的意思，我会尽可能彻底地解释它：

我想在每次点击时打开主导航项目2的子项目（主导航项目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>

Answer 2

不要附加#ID元素。 ID应该是唯一的。请使用类.subnavArrow
将jQuery引用为#site-nav作为父
使用Event.stopPropagation()（如果您使用更多嵌套的li＆gt; ul）
始终将var分配给变量，或使用,

＆＃13;

$(function() { // DOM ready

  var $LIsub = $("#site-nav li:has(ul)");

  $LIsub.children("a").append('<span class="subnavArrow"/>');
  
  $LIsub.click(function(e) {
    e.stopPropagation();
    $(this).find('> ul').slideToggle('slow');
  });

});

＆＃13;

#site-nav li ul{
  display:none;
}
.subnavArrow:after{
  content:"\25BC"
}

＆＃13;

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

＆＃13;

Answer 3

您的代码存在的问题是，当您单击子菜单<li>时，click事件会传播到父<li>，并触发隐藏<ul>的函数。

解决方案可能是在回调中移动点击侦听器的.has('ul')部分：

$(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').click(function(e) {
        e.stopPropagation();
        if ($(this).has('ul')) {
            $(this).children('ul').toggle('slow');
        }
    });

});

这样，侦听器还会侦听子菜单上的点击，并且可以阻止事件传播到具有e.stopPropagation();的父级

你可以在这个JSFiddle：https://jsfiddle.net/9ejpLmLf/

上找到这个解决方案

Answer 4

Very simple code
=============================
<pre>
$(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 a').click(function() {
    $(this).siblings('ul').toggle('slow');
  });

});
</pre>

jquery子菜单：li项目仍在切换

4 个答案: