单击其他项目时，如何从先前的选择中删除班级？ [英] How do I remove class from previous selection when clicking additional item?

问题描述

http://jsfiddle.net/freqn/ZHt6V/2/

在此手风琴中单击附加项目时，如何从先前的选择中删除类别？我希望在扩展下一个项目时从上次单击的项目中删除该类。选择新项目时，所有其他项目应重新变成灰色。谢谢。

How do I remove class from previous selection when clicking additonal item in this accordion? I want the class to be removed from the previous clicked item when the next item is expanded. All other items should turn back to gray when new item is selected. Thank you.

(function () {

    $('dd').hide();
    $('dt').click(function(){
        $(this)
            .next()
            .slideToggle(200)
            .siblings('dd')
            .slideUp(200);
        });   

    $('dt').click(function(){
        $(this).toggleClass('active');

    }); 

})();

推荐答案

编辑： http://jsfiddle.net/uptownapps/ZHt6V/5/ -修订以添加折叠功能。

http://jsfiddle.net/uptownapps/ZHt6V/5/ -- Revision to add collapse functionality.

http://jsfiddle.net/uptownapps / ZHt6V / 4 /

首先，您可以使用相同的点击功能来处理所有这些问题。另外，我更喜欢使用 removeClass 和 addClass 而不是 toggleClass 仅仅是因为我能够更好地跟踪脑海中发生的事情。

First you can use the same click function to handle all of this. Also, I prefer to use removeClass and addClass rather than toggleClass just because I am able to keep track of what's happening in my head better that way.

    (function () {

    $('dt').click(function(){
        $(this) .next()
                .slideToggle(200)
                .siblings('dd')
                .slideUp(200);

        $('.active').removeClass('active');
        $(this).addClass('active');
    });

})();

您会注意到我也删除了 $（'dd'）。 hide（）; 并在 dd display：none; >元素。这将修复在jQuery和JS运行之前页面加载时看到的闪光。

You'll notice I also removed the $('dd').hide(); and instead added display: none; to the CSS definition for the dd element. This will fix the "flash" you see when the page loads before jQuery and your JS has run.

这篇关于单击其他项目时，如何从先前的选择中删除班级？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！