javascript - jQuery:一次展开一个列表项

Question

如您所见here我试图只将召唤者的额外匹配信息扩展到其下方的信息。但箭头正在将它们全部展开。

我试图利用从 this page 获得的代码，但我不太确定我做错了什么。

$('div.the-player li.listed-player .more').click(function(e) {
    var $target = $(e.target);
    if(!$target.is("div.the-player li.player-details")) {
        $('div.the-player li.player-details').animate({ height: "187px" });
    }
});

支持奥列格的回答

我添加了在展开动画之前检查高度当前是否为 0 的功能。如果它已经展开，那么您可以将其关闭回 0px。此外，我从 CSS 中删除了 margin-bottom 并将其添加到动画中，以便它同时发生(使其成为更平滑的动画)，并且在它正在关闭。因为该项目返回到 0 高度，所以它也会带走边距，从而形成厚实的消失行为，所以让我们同时讨论它。

$('div.the-player li.listed-player .more').click(function(e) {
    var $target = $(this).closest('div.the-player').find('li.player-details');
    if($target.height() == 0) {
        $target.animate({ height: "187px", marginBottom: "20px"});
    } else {
        $target.animate({ height: "0px", marginBottom: "0px" });
    }
});

Answer 1

您可以找到相对于所单击的按钮展开的区域:

$('div.the-player li.listed-player .more').click(function(e) {
    var $target = $(this).closest('div.the-player').find('li.player-details');
    $target.animate({ height: "187px" });
});

说明:

• $(this) 是被点击的元素
• .closest('div.the-player') 查找($(this) 的)祖先并返回与 'div.the-player' 匹配的最近祖先(父元素)
• .find('li.player-details') 查找('div.the-player' 元素的)后代元素并返回与 'li.player-details' 匹配的所有子元素

换句话说，我们首先找到我们知道按钮和要展开的区域所属的第一个公共(public)容器。然后，我们查看该容器内部以找到要扩展的区域。