如何在 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>

问题是：我有很多瓷砖，每个瓷砖都有相同的"设置大小"类div。当我按下链接时，我需要切换 ul 列表。到目前为止，我已经在JQuery上做了

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

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

Answer 1

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

获取匹配元素集中每个元素的同级元素，可以选择由选择器筛选。

法典

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

---

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

获取匹配元素集中每个元素的紧随其后的同级元素。

法典

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

Answer 2

您需要

单独绑定$(".toggle-btn").click并使用$.fn.next来切换同级.size-list。在这种情况下，您不再需要.size-set上的单击事件：

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

Answer 3

试试这个。

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

Answer 4

我得到了什么，这就是为什么我做了 2 个工作演示。我希望对您有所帮助。

$("#tile-1 .size-set a.toggle-btn").click(function(e){
  $('#tile-1 .size-list, #tile-1 .size-set a.toggle-btn').toggle('slow','swing');      
e.preventDefault();

}）;