使用JQuery切换div可见性

我正在编写一些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：

 
 Tabular Data
 
 //Content  

将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(); }); }); 

小提琴

要么

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

摆弄幻灯片

如果要使用滑动动作显示或隐藏匹配的元素，可以使用.slideToggle（）

Answer 2

如果要在同一元素中切换类名，最好在其中包含另一个固定类，并继续更改其他类。

这就是我所说的：

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

小费：

• 这里.toggler是触发元素的固定类 ，我在其中切换.expander和.expanded类。

• 另外，您为slideToggle选择了错误的元素。 #TableData是.parent().next() 。

工作演示 ： http ： //jsfiddle.net/ashishanexpert/nuw2M/1/

Answer 3

在你的函数里面它显示div然后再次隐藏它。

您可以通过调用.toggle()函数来交替其状态，因此jQuery决定自己显示或隐藏它。

Answer 4

这个小提琴演示了如何在div中切换div。

在div中切换div

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