jQuery 菜单，单击时展开和缩回菜单答案

【问题标题】：jQuery menu, expand and retract menu on clickjQuery 菜单，单击时展开和缩回菜单
【发布时间】：2014-03-27 15:42:37
【问题描述】：

我正在处理这个例子： http://codepen.io/anon/pen/gBCJK/

问题是，当我展开一个类别并单击另一个类别时，我希望所有其他展开的类别都收回，只留下最后一个被点击的类别。此外，如果您单击子类别，菜单会缩回。

关于如何解决它的任何想法？

【问题讨论】：

你不应该依赖高度，只需为高度添加css-classes（其他人已经给出了与javascript相关优化的答案）

标签： jquery html css menu toggle

【解决方案1】：

您可以重置 CSS max-height: 33px; 规则除最后点击的项目之外的所有项目，如下所示：

$('.item').click(function(){
    $('.item').not(this).css('max-height', '33px');
    $(this).css('max-height','429px')
});

这也确保了当您单击子类别时菜单不会折叠，因为尽管您仍在对 .item div 执行单击事件，但不会从当前的“活动”中删除最大高度一个。

【讨论】：

谢谢，我试过了，它可以工作，但它似乎在 IE 9 及以下版本中不起作用......或者我搞砸了
嗨伊万。我现在无法在旧浏览器中进行测试，但我决定重新编写您的示例并在此处使用稍微不同的 jQuery 方法。 You can find it here。它利用列表（通常首选此类菜单）和 jQuery slideUp() 和 slideDown() 效果来处理动画，而不是使用最大高度和过渡。如果它适合您，请告诉我，我会将其编辑到我的答案中。

【解决方案2】：

我认为这种切换最好使用一个类（例如“open”）来控制样式更改并显示状态。

您可以在this fiddle 中看到我的更改，但这里有一个摘要。 “打开”项的新 CSS 类。

#accordion .item.open {
    max-height: 429px;
}

以及新的点击事件代码：

$('.item').click(function(){
    $(this).siblings('.open').addBack().toggleClass('open');
});

选择单击的项目，以及所有具有“打开”类的兄弟（具有相同父级的元素）并切换它（因此关闭打开的项目并打开关闭的项目）。

【讨论】：

【解决方案3】：

我认为您可以通过将子项目重新组织到 div 中找到更好的方法但暴力方法是在任何点击时重置“项目”元素的大小。

$(document).ready(function(){
    $('.item').click(function(){
        $('.item').css('max-height','33px');

        if($(this).css('max-height') == '33px') {
               $(this).css('max-height','429px')
        }
    });
});

【讨论】：