jquery - 切换类无法正常工作

Question

我有一个 Accordion (一种)。一切正常，除了...

主要规则:单击方 block ，显示文本，并将背景从灰色更改为红色(工作)， 单击不同，显示文本，并将单击的方 block 上的背景更改为红色(工作) 单击同一个方 block ，折叠文本并将背景颜色从红色更改为灰色(不起作用)。代码有什么问题吗？

任何这方面的帮助将不胜感激。

演示:jsFiddle

jQuery:

$( document ).ready(function() {
$('.v3').each(function (i) {

    $(this).attr('data-menu', 'nr' + i);
});

$('.describe .describeModule').each(function (i) {
    $(this).attr('id', 'nr' + i);
});


$('.v3').click(function () {

                $('.v3').removeClass('activeModule');
                $(this).toggleClass( 'activeModule' );

                menu = $("#" + $(this).data("menu"));

                $(".describeModule").not(menu).slideUp("slow");
                menu.slideToggle("slow");
            });
});

HTML

<div class="container">
<div class="v3"></div>
<div class="v3"></div>
<div class="v3"></div>
</div>

  <div class="describe">
    <div class="describeModule">one</div>
    <div class="describeModule">two</div>
    <div class="describeModule">three</div>
 </div>

Answer 1

当您删除 activeModule 类时，跳过单击的元素，这就是为什么在下一行中，当您调用 .toggleClass() 时，它会添加 activeModule 类。

$('.v3').not(this).removeClass('activeModule');

脚本

$( document ).ready(function() {
    $('.v3').each(function (i) {

        $(this).attr('data-menu', 'nr' + i);
    });

    $('.describe .describeModule').each(function (i) {
        $(this).attr('id', 'nr' + i);
    });


    $('.v3').click(function () {

                    $('.v3').not(this).removeClass('activeModule');   //change here skip the clicked element 
                    $(this).toggleClass( 'activeModule' ); 

                    menu = $("#" + $(this).data("menu"));

                    $(".describeModule").not(menu).slideUp("slow");
                    menu.slideToggle("slow");
                });
});

FIDDLE