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

Question

这让我很头疼。抱歉，如果这是一个小学生的错误。我有一个非常直接的 jquery 手风琴，我可以通过添加 class 在可点击的 header 上为每个内容切换样式，但是当我单击以折叠该元素本身，仅当我展开同级时。我用一个简单的颜色开关在 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 class： $('.active').removeClass('active');
然后你用这一行再次添加它：
$(this).toggleClass('active');

对第一行进行此更改将修复它：
$('.active').not($(this)).removeClass('active');
通过这种方式，您可以从所有 other 项中删除活动的 class，并使用后面的 toggleClass 行，从中删除 class单击项目。

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

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

这是更新后的 fiddle：http://jsfiddle.net/wf73o6c6/2/

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

Toggle clickable element style in accordion

html

javascript

css

jquery

accordion