toggleClass不能正常工作

Question

我有一个手风琴（一种），一切正常，除了...

主要规则：单击方块，显示文本，并将背景从灰色变为红色（有效）； 单击其他方块，显示文本，并将所单击的方块背景变为红色（有效）； 再次单击相同的方块，折叠文本并将背景颜色从红色变为灰色（无效）。 代码有什么问题？

如有帮助，将不胜感激。

演示：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>

- TTomu

Answer 1

问题在于你在 toggleClass 之前调用了删除类的函数。它不仅从当前元素中删除了 activeModule 类，还使得 toggleClass 不知道此时的 this 元素是否具有该类，因此它将始终添加该类。

因此，解决方案是从除当前元素以外的所有元素中移除 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');
        $(this).toggleClass('activeModule');

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

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

Demo: Fiddle

- Arun P Johny

---

太快了！非常感谢！ - TTomu

Answer 2

在删除 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

- Brijesh Bhatt

---

哇！速度真快！谢谢！在 jsFiddle 上运行得很好。有什么想法，为什么 WordPress 忽略它？ - TTomu

@Tomu 不好意思，我对WordPress一无所知。 - Brijesh Bhatt

非常感谢您的检查和纠正。 - TTomu