Question

每当＆＃34;部分＆＃34;单击，我想下一个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（）工作正常。但现在我想知道如何将li元素用于文本＆＃34; Back＆＃34;在其中关闭子菜单。我已经添加了一个课程＆＃34; back＆＃34;到每个子菜单列表中的最后一个LI元素，但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会影响代码的兄弟姐妹，即其他.section代码，而您想要操作的<li>代码实际上是其后代。因此你应该使用

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

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

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: