使用 jQuery(this).next() 到 show/hide 菜单中的下一个嵌套 UL

Question

每当单击 "section" 时，我希望下一个 UL（子菜单）消失（或重新出现）。我可以让一个简单的 P 标签消失在这棵树之外，但我正在尝试使用 jQuery next();功能。我怎样才能 select 这个元素与 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 元素中添加了 class "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>

Answer 1

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

我还在 children 上添加了额外的点击功能。这可以防止单击 child 关闭 sub-menu。

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

Answer 2

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

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

find 和 toggle 方法是您需要的方法。

使用 jQuery(this).next() 到 show/hide 菜单中的下一个嵌套 UL

Using jQuery(this).next() to show/hide the next nested UL in a menu

html

javascript

jquery

jquery-ui

jquery-mobile