javascript - 可折叠菜单需要最终调整(jquery)

Question

      function collapseAll() {
                $(".cmenu > li > a ").each(function() {
                    $(this).addClass("collapsed");
                    $(this).find("+ ul").each(function() {
                        $(this).css("display","none");
                        })
                    })
                }
      $(document).ready(function () {
        var handleCollapsibleMenu = function (e, menu) {
            var expanded = e.parent().parent().find('> li > a.expanded').not(e);
            expanded.removeClass('expanded').addClass('collapsed').find('+ ul').slideUp('medium');
            e.find('+ ul').slideToggle('medium');
            };
        collapseAll();
        $('.cmenu').on('click', '> li > a', function () {
                var self = $(this);
                var menu = self.parent().parent();
                var el = self.find('+ ul');
                self.toggleClass('expanded').toggleClass('collapsed');
                handleCollapsibleMenu(self, el);
                });
        })

显示的可折叠菜单here (jsfiddle)远非完美，但它做了我需要它做的事情......除了我希望在扩展新关卡时能够折叠任何以前的关卡。

说明(在 fiddle 上):

1. 单击级别 1[1] 将其展开。
2. 点击级别 2[2] 将其展开。
3. 单击级别 2[3] 将其展开。请注意，Level 2[2] 现在已折叠。这就是我想要的行为......
4. 单击级别 1[2]。您会看到级别 1[1] 仍然处于扩展状态。我希望 Level 1[1] 在发生这种情况时折叠(但显然 Level 1[2] 仍然展开)。

注意:我从来源借用了这个js和css，并将其修改为允许级别3。但后来找不到原始来源。如果有人认识此代码，请告诉我来源。感谢您的帮助。

Answer 1

问题出在你的html中:你有两个 <ul>当您只需要其中之一时，位于根级别。

所以删除 </ul><ul class='cmenu'>中间的部分。即。

    ...
  </li>
</ul>
<ul class='cmenu'>
  <li><a>Level 1[2]</a>
    ...

现在只是

    ...
  </li>
  <li><a>Level 1[2]</a>
    ...

这给出了根级别的结构

<ul>
  <li>...</li>
  <li>...</li>
</ul>

而不是

<ul>
  <li>...</li>
</ul>
<ul>
  <li>...</li>
</ul>

这会导致问题。