Question

这是我的头脑。抱歉，如果这是一个小学生的错误。我有一个非常直接的jquery手风琴，我可以通过添加一个类在每个内容的可点击标题上切换一个样式，但是当我单击以折叠该元素本身时，只有当我展开一个兄弟时，该类才会出现。我用简单的颜色开关在jsfiddle上弹出了这个。

   $(document).ready(function ($) {
       $('#showHideAccordion').find('h2').click(function () {
           $('.active').removeClass('active');
            //Expand or collapse this panel
           $(this).next().slideToggle('slow');
           $(this).toggleClass('active');
            //Hide the other panels
           $(".podContent").not($(this).next()).slideUp('slow').removeClass('active');
       });
    });

http://jsfiddle.net/wf73o6c6/

Answer 1

单击已处于活动状态的项目时，使用以下行删除active类： $('.active').removeClass('active');
然后用这一行再次添加它：
$(this).toggleClass('active');

对第一行进行此更改将解决此问题：
$('.active').not($(this)).removeClass('active');
这样您就可以从所有其他项目中删除活动类，并使用后面的toggleClass行删除该类，点击该项目。

你不需要在最后一行删除该类，你已经处理过了（我看到你已经在这里使用了.not()函数，所以你的错误可能只是缺乏关注）。 $(".podContent").not($(this).next()).slideUp('slow');

此外，不相关，但为什么$('#showHideAccordion').find('h2')而不只是$('#showHideAccordion h2')？

这是一个更新的小提琴：http://jsfiddle.net/wf73o6c6/2/

按手风琴切换可点击元素样式

1 个答案: