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

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

这就是我的意思：

$(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 3

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

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

Answer 4

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

Toggle div inside the div

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

使用JQuery切换div可见性

4 个答案: