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)的可折叠菜单远非完美，但它完成了我需要它做的事情......除了我希望能够在我扩展新级别时折叠任何先前的级别。

说明（小提琴）：

单击级别1 [1]将其展开。
单击级别2 [2]将其展开。
单击Level 2 [3]将其展开。请注意，级别2 [2]现在崩溃了。这就是我想要的行为....
点击等级1 [2]。你看到1级[1]仍在扩展。我想要的是1级[1]在发生这种情况时崩溃（但显然级别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>

导致问题。

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

1 个答案: