单击其他项目时如何从先前的选择中删除类？

Question

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

如果在此手风琴中单击其他项目，如何从之前的选择中删除课程？我希望在展开下一个项目时从上一个单击的项目中删除该类。选择新项目后，所有其他项目应重新变为灰色。谢谢。

(function () {

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

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

    }); 

})();

Answer 1

修改 http://jsfiddle.net/uptownapps/ZHt6V/5/ - 修改以添加折叠功能。

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

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

    (function () {

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

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

})();

您会注意到我还删除了$('dd').hide();，而是将display: none;添加到dd元素的CSS定义中。这将修复在jQuery和JS运行之前页面加载时看到的“flash”。