0

我无法使这段代码工作：

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

4

2 回答 2

1

在我看来，您使用 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 中有所描述。如果您需要对此进行更多说明，请告诉我。

于 2013-10-18T22:22:48.750 回答
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

于 2013-10-18T22:13:30.227 回答