Question

我有同班的div。当我点击方框一箭头时，我想要滑动方框二。问题是因为我有五个相同类的盒子，当我点击一个盒子时它会打开所有盒子。如何影响点击箭头只打开被点击的框？有人可以帮忙吗？

<div class="box-one">
<a href="#" class="arrow"></a>
</div> 
<div class="box-two">
<p>Some text</p>
</div>

<div class="box-one">
<a href="#" class="arrow"></a>
</div> 
<div class="box-two">
<p>Some text</p>
</div>

.box-two { display: none; }

$('.box-one a.arrow').on('click', function(e) {
    e.preventDefault();
    ('.box-two').slideToggle(300);
});

Answer 1

您使用closest查找包含所点击箭头的ifelse，然后使用next仅影响.box-one后面的.box-two ：

.box-one

直播示例：

＆＃13;

$(".box-one a.arrow").on("click", function(e) {
    e.preventDefault();
    $(this).closest(".box-one").next().slideToggle(300);
});

＆＃13;

$(".box-one a.arrow").on("click", function(e) {
    e.preventDefault();
    $(this).closest(".box-one").next().slideToggle(300);
});

＆＃13;

.box-two { display: none; }

＆＃13;

更多要探索的内容：The traversing category of the jQuery API documentation （实际上，整个API文档只需要一个小时左右的时间来阅读）。

仅影响在jQuery中单击的元素

1 个答案: