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中描述的。 如果您需要更多关于这一点的说明，请与我们联系。