点击 LI，显示/隐藏 UL

Question

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

我已将代码发布到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');
    });
});

Working fiddle

Answer 2

Demo

$(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()：这会隐藏所有其他打开的子菜单。