gpt4 book ai didi

javascript - 如何将 Jquery slideToggle() 应用于具有相同类的多个 div?

转载 作者:行者123 更新时间:2023-11-27 23:51:29 24 4
gpt4 key购买 nike

$(document).ready(function() {
$(".main_box").click(function() {
$(".sliding_box").slideToggle();
});
});
div.wrapper {
width: 300px;
float: left;
margin-right: 10px;
}
div.main_box {
width: 300px;
height: 30px;
background-color: #FF0000;
}
div.sliding_box {
width: 300px;
height: 300px;
background-color: #0000FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrapper">
<div class="main_box"></div>
<div class="sliding_box"></div>
</div>
<div class="wrapper">
<div class="main_box"></div>
<div class="sliding_box"></div>
</div>

当我点击“main_box”div 时,两个“sliding_box”div 都会上升。单击第一个“main_box”div 后,我只希望第一个“sliding_box”div 上升。

有人知道怎么做吗?

最佳答案

您必须定位 $(this).siblings('.sliding_box') 而不是 $(".sliding_box")

$(document).ready(function() {
$(".main_box").click(function() {
$(this).siblings('.sliding_box').slideToggle();
});
});
div.wrapper {
width: 300px;
float: left;
margin-right: 10px;
}
div.main_box {
width: 300px;
height: 30px;
background-color: #FF0000;
}
div.sliding_box {
width: 300px;
height: 300px;
background-color: #0000FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrapper">
<div class="main_box"></div>
<div class="sliding_box"></div>
</div>
<div class="wrapper">
<div class="main_box"></div>
<div class="sliding_box"></div>
</div>

引用:.siblings()

关于javascript - 如何将 Jquery slideToggle() 应用于具有相同类的多个 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26955618/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com