Question

我无法使这段代码工作：

$("a.expand_all").on("click",function(){
    $(this).text('Hide');
    $('.answer').each(function () {
        $(this).slideDown(150, function () {
            $(this).show();
        });
    });
}, function () {
    $(this).text('Expand');
    $('.answer').each(function () {
        $(this).slideUp(150, function () {
            $(this).hide();
        });
    });
});

我正在尝试折叠多个div，但是click事件没有任何反应。我正在使用最新的jQuery 1.10.1

Answer 1

这看起来不像是绑定到我的有效事件，在那里有两个函数。

HTML - 我为事件委托添加了一个div包装器

<div class="expando_content">
<a class="expand_all" href="#">Expand</a>

    <p class="answer">I'm an answer!</a>
        <p class="answer">Another answer</a>
            <p>Dynamically added "expand more" goes below...it won't work :(</p>
            <div id="thing"></div>
        </p>
    </p>
</div>

JS - 在一个函数中移动了切换功能。

$(".expando_content").on("click", ".expand_all", function () {

    if (!$('.answer').is(':visible')) {
        $(this).text('Hide');
        $('.answer').each(function () {
            $(this).slideDown(150, function () {
                $(this).show();
            });
        });
    } else {
        $(this).text('Expand');
        $('.answer').each(function () {
            $(this).slideUp(150, function () {
                $(this).hide();
            });
        });
    }
});

$('<a class="expand_all" href="#">expand more</a>').appendTo($('#thing'));

jsFiddle

Answer 2

在我看来，你错误地使用了jQuery的.on方法。该方法有一些重载，但它们（明智地）都不需要两个函数。

如果我了解您要正确执行的操作，则只需在单击<a>标记时切换一些答案元素即可。你真正需要做的是确定你的答案是否得到扩展。有多种方法可以做到这一点，但我选择使用数据元素：

<a class="expand_all" href="#" data-collapsed="true">expand</a>
<p class="answer">I'm an answer!</a>
<p class="answer">Another answer</a>

然后您的JavaScript可以简化：

$('a.expand_all').on("click",function(){
    if( $(this).data('collapsed') ) {
        $(this).text('hide').data('collapsed','');
        $('.answer').slideDown(150);
    } else {
        $(this).text('expand').data('collapsed','true');
        $('.answer').slideUp(150);
    }
});

我也简化了一些构造。特别是在您的代码中：

$('.answer').each(function () {
    $(this).slideDown(150, function () {
        $(this).show();
    });
});

.each是不必要的。仅应用jQuery方法基本上等同于调用.each。您很少需要使用.each。这简化了这个：

$('.answer').slideDown(150, function () {
    $(this).show();
});

然后，.slideDown会在元素启动之前显示该元素，因此无需再次调用.show。所以我们可以摆脱回调，将所有这些简化为：

$('.answer').slideDown(150);

你可以在这里看到所有这些：

http://jsfiddle.net/Jammerwoch/sRnkw/5/

最后，我问你是否动态添加任何元素的原因是因为如果它们是，你附加它们的方式将无法工作。也就是说，jQuery选择器运行一次，然后在添加新元素时不再重新运行。所以你必须更聪明。这是在上面的jsfiddle中描述的。如果您需要更多关于这一点的澄清，请告诉我。

jQuery切换多个元素

2 个答案: