jquery - 如何在jquery中触发邻居元素到 "this"对象

Question

我有 1 个按钮 - <a>链接和列表 - ul。单击按钮时我需要显示/隐藏列表。这是代码:

<div class="wide-tile" id="tile-1">
    <div class="size-set">
        <a href="#" class="toggle-btn"> > </a>
        <ul class="size-list">
            <li>1x1</li>
            <li>1x2</li>
            <li>2x1</li>
            <li>2x2</li>
        </ul>
    </div>
    <a href="details.html" class="wide-tile-link">
        <span class="title">About us</span>
    </a>
</div>

问题是:我有很多图 block ，每个图 block 都有相同的“set-size”类 div。当我按下链接时，我需要切换 ul 列表。到目前为止，我已经在 J​​Query 上完成了

$(".size-set").click(function(){
    $(".toggle-btn",this).click(function(){
        $(".size-list",this).toggle("slow","swing");
    });
});

它不起作用，可能是因为这个 $(".size-list",this)构造用于父类和子类。我需要的是相同的 DOM 级别访问权限。

Answer 1

先单独绑定(bind)点击事件，然后就可以使用.siblings()了

Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

代码

$(".toggle-btn").click(function(){
    $(this).siblings(".size-list").toggle("slow", "swing");
});

---

根据您当前的 HTML，您还可以使用 .next()

Get the immediately following sibling of each element in the set of matched elements.

代码

$(this).next(".size-list").toggle("slow","swing");