jQuery子菜单:LI项目仍在切换

jquery submenu: li items still toggling

本文关键字：项目 LI 菜单 jQuery      更新时间：2023-09-26

我已经尝试了几个小时，因为我对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 的子菜单。

您可以检查是否单击了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>

  • 不要追加#ID元素。ID 应该是唯一的。改用类.subnavArrow
  • 在 jQuery 中引用 #site-nav 作为父项
  • 使用Event.stopPropagation()（如果要使用更多嵌套的 li>ul）
  • 始终将var分配给变量，或使用,连接 

$(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');
  });
});
#site-nav li ul{
  display:none;
}
.subnavArrow:after{
  content:"'25BC"
}
<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>

你的代码的问题在于，当你点击一个子菜单<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/

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>
相关文章：