使用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'); });