使用 jQuery(this).next() 在菜单中显示/隐藏下一个嵌套的 UL

Posted 2023-05-08

【中文标题】使用 jQuery(this).next() 在菜单中显示/隐藏下一个嵌套的 UL

【英文标题】：Using jQuery(this).next() to show/hide the next nested UL in a menu

【发布时间】：2017-02-06 14:34:02

【问题描述】：

每当单击“部分”时，我希望下一个 UL（子菜单）消失（或重新出现）。我可以让一个简单的 P 标签消失在这棵树之外，但我正在尝试使用 jQuery next();功能。如何使用 jQuery 选择此元素。我以为：

$(".section").click(function() 
   $(this).next('ul').hide();
);

可以，但不行……这是 html：

  <div class="menu">
    <ul class="main-menu">
        <li class="section">
            Section 1
            <ul class="sub-menu" style="z-index: 3;">
                <li>
                    Section 1A
                </li>
                <li>
                    Section 1B
                </li>
                <li>
                    Section 1C
                </li>
                <li>
                    Back
                </li>
            </ul>
        </li>
        <li class="section">
            Section 2
            <ul class="sub-menu" style="z-index: 2;">
                <li>
                    Section 2A
                </li>
                <li>
                    Section 2B
                </li>
                <li>
                    Section 2C
                </li>
                <li>
                    Back
                </li>
            </ul>
        </li>
    </ul>
</div>

更新

Find() 工作正常。但现在我想知道如何使用带有文本“Back”的 li 元素来关闭子菜单。我在每个子菜单列表的最后一个 LI 元素中添加了一个类“back”，但 jQuery 似乎无法找到它并应用 CSS。这是我所拥有的：

//this code works
$(".section").click(function() 
   $(this).find('ul').css( "left", "0" );
);

//this code doesn't locate the previous UL (i also tried (".sub-menu").css()
$('.back').click(function() 
   $('.back').prev('ul').css( "left", "485" );
);

//html:

            <li class="section">
            Section 1
            <ul class="sub-menu" style="z-index: 3;">
                <li>
                    <a href="#section1a">Section 1A</a>
                </li>
                <li>
                    <a href="#section1b">Section 1B</a>
                </li>
                <li>
                    <a href="#section1c">Section 1C</a>
                </li>
                <li class="back">
                    <a href="#back">Back</a>
                </li>
            </ul>
        </li>

【问题讨论】：

试试$(this).find('ul').hide();

也可以尝试使用.toggle 来隐藏和显示而不是.hide。

尝试@KartikeyaKhosla 的回答你的不工作的原因是在 .next() 函数中你选择当前选定元素的下一个兄弟。在您的情况下，您选择第一个 <li>，这将在调用 next() 时为您提供第二个 <li>。 find() 反而还挖掘子元素并寻找给定的选择器。此外，toggle() 非常适合隐藏和显示，如果您想在同一次点击中实现这两者。

【参考方案1】：

next 影响标签的兄弟姐妹，即其他 .section 标签，而您要操作的 <li> 标签实际上是它的后代。因此你应该使用

$(".section").click(function() 
    $(this).find('ul').toggle();
);

find 和 toggle 方法是您需要的。

【参考方案2】：

在您的代码中，您使用next() 来查看下一个兄弟姐妹，而您想查看的是孩子们。要定位它们，您可以使用find(filter) 函数。通过找到ul，您可以使用toggle() 或slideToggle 来切换它的可见性。

我还为孩子添加了额外的点击功能。这可以防止单击子菜单关闭子菜单。

$(function() 
  $('.section').click( function() 
    $(this).find('ul').slideToggle();
  ).children().click( function() 
    return false;
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul class="main-menu">
    <li class="section">
      Section 1
      <ul class="sub-menu" style="z-index: 3;">
        <li>Section 1A</li>
        <li>Section 1B</li>
        <li>Section 1C</li>
        <li>Back</li>
      </ul>
    </li>
    <li class="section">
      Section 2
      <ul class="sub-menu" style="z-index: 2;">
        <li>Section 2A</li>
        <li>Section 2B</li>
        <li>Section 2C</li>
        <li>Back</li>
      </ul>
    </li>
  </ul>
</div>

【讨论】：

谢谢大家，toggle() 或 slideToggle 绝对是要走的路，我只是使用了 hide()，因为我想快速隐藏元素以知道它正在工作。

Ted，如果我想让“back”孩子工作，而不是其他三个元素，有没有办法做到这一点？

猜后面应该关闭子菜单：$('.sub-menu li:last').click(function() $(this).parent().slideUp(); );