jQuery切换多个元素

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，但点击事件没有任何反应。我正在使用最新的 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 中有所描述。如果您需要对此进行更多说明，请告诉我。