Question

我有手风琴（有种）。一切都在运作，除了......

主要规则：点击正方形，显示文字，并将背景从灰色变为红色（正常工作），单击不同，显示文本，并在单击的方块上将背景更改为红色（工作）单击相同的方块，折叠文本并将背景颜色从红色更改为灰色（不工作）。代码有什么问题？

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

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

问题是您在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");
    });
});

演示：Fiddle

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

toggleClass无法正常工作

2 个答案: