toggleClass無法正常工作

我有一把手風琴（一種）。一切正常，除了...toggleClass無法正常工作

主要規則：點擊正方形，顯示文本，並將背景從灰色變爲紅色（工作），單擊不同，顯示文本並將背景更改爲紅色點擊方塊）單擊同一個正方形，摺疊文本並將背景色從紅色變爲灰色（不起作用）。代碼有什麼問題？

在這方面的任何幫助將不勝感激。

的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>

來源

2015-04-27 Tomu

跳過點擊的元素，當你刪除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

來源

2015-04-27 13:03:01

哇！它很快！謝謝！在jsFiddle作爲魅力工作。任何想法，爲什麼wordpress忽略它？ – Tomu

@Tomu不..我對wordpress沒有任何意見..對不起！ –

好吧，非常感謝你檢查並糾正我。 – Tomu

問題是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

來源

2015-04-27 12:57:19

這麼快！非常感謝！ – Tomu

toggleClass無法正常工作

回答

相關問題