Javascript 可折叠菜单（jquery）所需的最终调整

显示的可折叠菜单远非完美，但它做了我需要它做的事情。。。除了当我扩展一个新的关卡时，我希望能够折叠以前的关卡

举例说明（在小提琴上）：

单击级别1[1]将其展开

单击Level 2[2]将其展开

单击Level 2[3]将其展开。请注意，级别2[2]现在将折叠。这就是我在……时想要的行为

单击级别1[2]。您可以看到级别1[1]仍处于扩展状态。我希望1级[1]在发生这种情况时崩溃（但显然1级[2]仍在扩展）

---

注意：我从一个源代码中借用了这个js和css，并对其进行了修改以允许级别3。但后来找不到原始来源。如果有人知道这个代码，请告诉我代码的来源。谢谢您的帮助。

问题出在您的html中：在根级别有两个

s，而您只需要其中一个

删除中间的“<代码> < UL类= 'CMANL' ><代码>节。即

      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);
                });
        })

。。。



一级[2]
...

现在只是

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

。。。

一级[2]
...

这将在

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

而不是

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

---

这导致了问题。

感谢您尝试一下，但您的解决方案似乎无法解决我想要解决的问题。你看过JSFIDLE了吗？我认为我需要的解决方案是更改javascript。你可能是对的，html可以改进（我从其他地方复制了脚本），但是html更改并不能解决我的问题。这里有一个更新的小提琴与上述变化-哇！是的，这似乎已经回答了我的问题，但我目前不明白为什么会这样。我将尝试将其应用到我实际的更复杂的菜单中，但它似乎已经解决了。非常感谢！我浏览了JS，没有发现代码有什么问题。然而，为了工作，它希望能够在树中向上移动父节点，然后再次向下移动以隐藏其他分支。它是两个完全独立的

树，因此它不能在一个单独的树上进行上下转换，这也是一个非常有用的解释。我目前正在苦读构建实际菜单的PHP代码，这有助于我理解问题所在。再次感谢！

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