使用JQuery切換div可見性

Question

我在寫一些jQuery代碼來切換Div可見性。我遵循這裏發佈的方法：http://jsfiddle.net/Ga7Jv/。

當用戶點擊圖片（H2標籤旁邊）時，我希望它切換div。

這裏是Jquery的：

$(function() 
{ 
$(".expander").live('click', function(){ 
     $(this).next("#TableData").slideDown(); 
     $(this).removeClass('expander'); 
     $(this).addClass('expanded'); 
}); 

$(".expanded").live('click', function(){ 
     $(this).next("#TableData").slideUp(); 
     $(this).removeClass('expanded'); 
     $(this).addClass('expander'); 
}); 

下面是HTML：

<h3><img src="toggle.png" class ="expander" alt="Expand"/> 
Tabular Data</h3> 
<div id="TableData"> 
//Content 
</div> 

的是應用於類擴展的CSS，當我點擊它看來，CSS改變按鈕，我會期待的。所以我假設代碼找到了切換按鈕並切換了類。

但它不執行我需要的操作，即根據該類上下滑動div。

另一種方式我試圖做到這一點是這樣的：

$(function(){ 
    $('.expander').live('click',function(){ 
    $('#TableData').show(); 
    $('#TableData').hide(); 
     }); 

這僅關閉DIV，當我點擊它不會再次打開。我也有它，所以它關閉很好，但是當我打開它時，它會立即關閉。

感謝

Answer 1

問題與您的代碼是其最後一個函數調用.hide()，因此它總是隱藏在div

只需使用.toggle()，它顯示或隱藏匹配的元素。

$(function(){ 
    $('.expander').live('click',function(){ 
     $('#TableData').toggle(); 
    }); 
}); 

Fiddle

OR

$(function() { 
    $('.expander').live('click', function() { 
     $('#TableData').slideToggle(); 
    }); 
}); 

Fiddle with slide

您可以使用.slideToggle()，如果你想顯示或用滑動隱藏匹配的元素

Answer 2

在你的函數裏面它顯示div然後再隱藏它。

你可以通過調用.toggle()函數來替換它的狀態，所以jQuery決定單獨顯示或隱藏它。

Answer 3

如果你想在同一個元素中切換類名，最好在其中有一個固定類並且不斷改變其他類。

這裏就是我說：

$(function(){ 
    $(".toggler").on("click", function(){ 
     $(this) 
     .toggleClass("expander expanded") 
     .parent().next().slideToggle(); 
    }); 
}); 

提示：

• 這裏.toggler是觸發元素固定類，我在切換.expander和.expanded類它。

• 另外，您正在爲slideToggle選擇錯誤的元素。 #TableData是.parent().next()。

Working Demo：http://jsfiddle.net/ashishanexpert/nuw2M/1/

Answer 4

這撥弄演示如何切換div內一個div。

Toggle div inside the div

$('.toggle').click(function(){ $('.showMe').slideToggle('slow'); });