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" });
    }
});

支持Oleg的回答

我已经添加了在进行扩展动画之前检查高度当前是否为0的功能。如果它已经扩展，那么你可以关闭回到0px。另外，我已经从CSS中删除了margin-bottom并将其添加到动画中以便它可以同时发生（使其成为更平滑的动画）并且在关闭时看起来不像20px。因为物品回到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'的子元素

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

jQuery：一次展开一个列表项

1 个答案: