如何触发 jquery 中 "this" 对象的邻居元素

Question

我有 1 个按钮 - <a> link 和列表 - ul。单击按钮时，我需要 show/hide 列表。这是代码：

<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>

问题是：我有很多块，每个块都有相同的 "set-size" class div。当我按下 link 时，我需要切换 ul 列表。到目前为止，我已经完成 JQuery

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

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

Answer 1

先单独绑定点击事件，然后就可以使用.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");

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 工作的原因 demo。希望对您有所帮助。

$("#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();

});

如何触发 jquery 中 "this" 对象的邻居元素

How to trigger neighbour element to "this" object in jquery

html

css

jquery

jquery-selectors