Javascript 使用JQuery切换div可见性

我正在编写一些jquery代码来切换Div可见性。我遵循了这里发布的方法：

当用户单击图像（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>

这只会关闭div，单击它时不会再次打开。我也有，所以它关闭良好，但当我打开它，它立即关闭再次

---

谢谢

代码的问题是，它的最后一个函数调用是

.hide（）

，因此它将始终隐藏div

只要使用，它就会显示或隐藏匹配的元素

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

或

---

如果要在函数中显示或隐藏具有滑动运动的匹配元素，可以使用它显示div，然后再次隐藏

---

您可以通过调用

.toggle（）

函数来改变它的状态，因此jQuery决定自己显示或隐藏它。

如果您想在同一元素中切换类名，最好在其中设置一个固定类，并不断更改其他类

我的意思是：

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

提示：

• 这里

  .toggler

  是触发器元素的固定类，我正在切换其中的

  .expander

  和

  .expanded

  类

• 此外，您选择的滑动切换元素错误#TableData是

  .parent（）.next（）

---

：

此小提琴演示如何在div内切换div

$（'.toggle'）。单击（函数（）{
$（'.showMe'）.slideToggle（'slow'）；
});
旁注：从jQuery 1.7开始，.live（）方法已被弃用。使用.on（）附加事件处理程序。jQuery旧版本的用户应该优先使用.delegate（），而不是.live（）。感谢所有的答案，我最终使用了Satpal，以避免在不需要更改类的情况下更改类。CSS
Display:none中的“可见性”和“显示”是不同的和
可见性：隐藏。jQuery的切换（和slideToggle）将显示更改为无，将其从页面布局中删除-如果您希望元素“不可见”，但仍然占用以前占用的空间，则需要设置
$（'#TableData'）.css（“可见性”，“隐藏”）然后在需要时将其更改回。
$(function () {
    $('.expander').live('click', function () {
        $('#TableData').slideToggle();
    });
});

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