Question

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

问题在于，当我扩展了一个类别，并且我点击另一个类别时，我希望所有其他扩展类别都撤消，只留下最后一个单击打开。此外，如果单击子类别，菜单将缩回。

关于如何修复它的任何想法？

Answer 1

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

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

这也可确保单击子类别时菜单不会崩溃，因为尽管您仍在.item div上执行点击事件，但最大高度不会超过从当前活跃的＆＃39;中删除之一。

Answer 2

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

您可以在this fiddle中看到我的更改，但这里是摘要。 “开放”项目的新CSS类。

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

和新点击事件代码：

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

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

Answer 3

我认为您可以通过将子项目重新组织为div 来找到更好的方法，但蛮力的方法是重置您的项目的大小＆＃39;任意点击的元素。

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

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

jQuery菜单，单击时展开和缩进菜单

3 个答案: