时间戳

首页 > 解决方案 > 无法展开二级菜单

html - 无法展开二级菜单

问题描述

我是一个 jquery 菜鸟，我不知道如何在可点击的手风琴式菜单中获得下一个级别的扩展。

这是小提琴：

https://jsfiddle.net/hinterseer/gaxm6uqo/29/

html

<div class="navbar-collapse">
 <ul class="nav">
  <li class="subMenu">Archive <span class="caret toggle">+</span>
   <ul class="subMenu-link">
    <li>Test 1</li>
    <li>Test 2</li>
   </ul>
  </li>
  <li class="subMenu"> Archive 2 <span class="caret toggle">+</span>
   <ul class="subMenu-link">
    <li class="subMenu">Archive 3 <span class="caret toggle">+</span>
      <ul class="subMenu-link">
        <li>Test 3</li>
        <li>Test 4</li>
      </ul>
    </li>
   </ul>
  </li>
 </ul>
</div>

css

.subMenu-link {
  display: none;
 }

.subMenu {
  list-style: none;
 }

杰瑞

(function($) {


  $("li.subMenu").unbind().click(function () {
      var slideDown = $(this).find(".toggle").text() == "+" ? false : true;
      $(".subMenu-link").slideUp();
      $(".toggle").text('+');


      if (!slideDown) {
          $(this).find('.subMenu-link').slideDown();
          $(this).find('.toggle').text('-');

      }
  });



})(jQuery);

标签： htmljquery

解决方案

我进一步重构了一些东西，以便能够独立地切换每个列表项及其子项。我列出了以下更改：

  • 将侦听器更改为$(".toggle").on('click', function() {...
  • 更改slideDown和const修改选择器$(this).find(".caret:first")...
  • 用于.siblings()向上/向下滑动功能，$(this).siblings(".subMenu-link").slideUp()
  • 重组 HTML 以将li文本包裹在自己span的文本中，以便文本触发切换而不是整个元素（及其子元素）
  • 添加cursor: pointer到.toggle用户指示点击的视觉提示

看到这个，我想我会试一试，即使它被问得更多。

(function($) {


  $(".toggle").on('click', function() {
    const slideDown = $(this).find(".caret:first").text() == "+" ? false : true;
    $(this).siblings(".subMenu-link").slideUp();
    $(this).find(".caret").text('+');


    if (!slideDown) {
      $(this).siblings('.subMenu-link').slideDown();
      $(this).find('.caret').text('-');
    }
  });



})(jQuery);
.subMenu-link {
  display: none;
}

.subMenu {
  list-style: none;
}

.toggle {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar-collapse">
  <ul class="nav">
    <li class="subMenu"><span class="toggle">Archive <span class="caret">+</span></span>
      <ul class="subMenu-link">
        <li>Test 1</li>
        <li>Test 2</li>
      </ul>
    </li>
    <li class="subMenu"><span class="toggle">Archive 2 <span class="caret">+</span></span>
      <ul class="subMenu-link">
        <li class="subMenu"><span class="toggle">Archive 3 <span class="caret">+</span></span>
          <ul class="subMenu-link">
            <li>Test 3</li>
            <li>Test 4</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

推荐阅读