点击 LI，显示/隐藏 UL

Question

我正在尝试进行切换导航，但我似乎无法弄清楚我的代码出了什么问题。这很混乱，因为我使用的是 CMS，它创建了列表菜单中使用的 id 和类。理想情况下，我会为列表提供一个更好的名称。

我已经在 https://jsfiddle.net/chachacallis/amfmsors/1/上发布了代码

$(document).ready(function () {
    $('ul ul').hide();
    $('ul li span.section_title a').removeAttr("href");
    $('ul li span.section_title > a').click(function (event) {
        $('ul ul').hide('slow');
        $(this).parent().find('ul').toggle('slow');
    });
});

更新如果我不希望对主页和其他没有子菜单的项目禁用默认操作，该怎么办？如何将其添加到现有代码中？

Answer 1

首先，你的jsFiddle不包含jQuery，所以它什么也没做。其次，从a元素中删除 href 属性会使它们无法单击。如果要停止单击时遵循的链接操作，则需要对引发的事件使用preventDefault()。最后，您的 DOM 遍历不正确。您需要使用 closest('li').find() ，因为a的parent()是一个不包含ul的span。把所有这些付诸行动，你会得到这样的东西：

$(document).ready(function () {
    $('ul ul').hide();
    $('ul li span.section_title > a').click(function (e) {
        e.preventDefault();
        $('ul ul').hide('slow');
        $(this).closest('li').find('ul').toggle('slow');
    });
});

工作小提琴

Answer 2

演示

$(document).ready(function() {
  $('.section').on('click', 'li a', function(e) {
    e.preventDefault();
    $(this).closest('li').find('ul').slideToggle();
    $(this).closest('ul').siblings('.section').find('ul').slideUp();
  });
});;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul id="section_1" class="section active_section">
  <li><span class="section_title active_section_title" id="section_title_1"><a id="section_link_1" href="#">Home</a></span>
    <ul style="display: none;">
      <li>
        a
      </li>
      <li>b
      </li>
    </ul>
  </li>
</ul>
<ul id="section_4" class="section">
  <li><span class="section_title" id="section_title_4"><a id="section_link_4" href="#">About</a></span>
    <ul style="display: none;">
      <li>
        a
      </li>
      <li>b
      </li>
    </ul>
  </li>
</ul>
<ul id="section_2" class="section">
  <li><span class="section_title" id="section_title_2"><a id="section_link_2" href="#">Lines</a></span>
    <ul style="display: none;">
      <li class="exhibit_title" id="exhibit_12"><a href="#">wellWE</a>
      </li>
      <li class="exhibit_title" id="exhibit_11"><a href="http://localhost/apparel/index.php/license/-marvel/">Arrival</a>
      </li>
      <li class="exhibit_title" id="exhibit_10"><a href="#">Star Home</a>
      </li>
    </ul>
  </li>
</ul>
<ul id="section_3" class="section">
  <li><span class="section_title" id="section_title_3"><a id="section_link_3" href="#">Private homeland</a></span>
    <ul style="display: none;">
      <li class="exhibit_title" id="exhibit_13"><a href="#">ttW 15-16</a>
      </li>
      <li class="exhibit_title" id="exhibit_14"><a href="#">ghy15</a>
      </li>
    </ul>
  </li>
</ul>
<ul id="section_5" class="section">
  <li><span class="section_title" id="section_title_5"><a id="section_link_5" href="#">contact</a></span>
    <ul style="display: none;"></ul>
  </li>
</ul>

$(this).closest('li').find('ul').slideToggle()：这将切换（如果显示则隐藏，反之亦然）当前菜单中的ul，即子菜单ul

$(this).closest('ul').siblings('.section').find('ul').slideUp() ：这将隐藏所有其他打开的子菜单。