jquery toggle css類

這jquery切換兩件事。（1）一個CSS類和（2）顯示一個div。如果我點擊元素外部的按鈕（菜單切換），切換效果很好，但如果我在元素內部單擊，切換div，但css類不會。這是爲什麼？jquery toggle css類

我需要添加CSS類走的「菜單切換」第二次點擊的時候。

<div id="menuwrap"> 
<a href="#" id="menutoggle">Menu Toggle</a> 
<ul id="menucontainer"> 
    <li><a href="#">One</a></li> 
    <li><a href="#">Two</a></li> 
    <li><a href="#">Three</a></li> 
</ul> 
</div> 
this is more text 

<script> 
$('html').click(function() { 
$('#menucontainer').hide(); 
$('#menutoggle').removeClass('menutoggle'); 
}); 

$('#menuwrap').click(function(event){ 
event.stopPropagation(); 
}); 

$('#menutoggle').click(function(event){ 
$('#menucontainer').toggle(); 
$(this).addClass('menutoggle'); 
}); 
</script>

來源

2012-06-12 mr.musicman

$('#menutoggle').click(function(event){ 
    $('#menucontainer').toggle(); 
    $(this).toggleClass('menutoggle'); 
});

http://jsfiddle.net/L5Cq3/

最少的線實現期望的結果。

來源

2012-06-12 23:53:44 Fresheyeball

非常好。謝謝。 –

變化$(this).addClass('menutoggle');到$(this).toggleClass('menutoggle');

來源

2012-06-12 23:49:21

完美。謝謝。 –

嘿胡安，我有一個：懸停CSS類集，我想要刪除它，當你點擊鏈接。我認爲它只是$（this）.removeClass（'a：hover'）; beattrack.net/test.php上有實時預覽。提前致謝！ –

「a：懸停」es實際上不是一個班級。它是一個僞類（參見http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes）。我不知道是否有一個純粹的CSS解決方案，你想要什麼。考慮添加一個特定的類「onmouseover」元素，然後刪除它'onmouseout'。然後，點擊後，停止添加類'onmouseover'。 –

這是因爲，當您單擊菜單容器上，這兩個事件被觸發（即HTML單擊處理程序，並在div點擊處理）。

也許這就是你想要什麼：

$('#menutoggle').click(function(event){ 
    $('#menucontainer').toggle(); 
     if ($(this).hasClass('menutoggle') 
      $(this).removeClass('menutoggle'); 
     else 
     $(this).addClass('menutoggle'); 
});

編輯你可以只使用toggleClass（學分娟提醒我的存在），以及。我很確定，在引擎蓋下，它和我上面的代碼做的一樣。

這是你的固定提琴：http://jsfiddle.net/aL7Xe/69/

來源

2012-06-12 23:50:14 xbonez

也很好用。謝謝您的意見。 –

jquery toggle css類

回答

相關問題