gpt4 book ai didi

jquery - 多个 SlideToggle jQuery

转载 作者:太空宇宙 更新时间:2023-11-03 18:35:54 25 4
gpt4 key购买 nike

我有一个 slideToggle 正在向下移动内容以使其可见。但是,目前,我在一页上有多个。因此,当单击一个时,它们都会将内容向下移动并使其可见。我想做的是当一个被点击时,只有那个 .tst 元素被切换。

<script type="text/javascript">
$('.tst').hide();
$("div.slide").addClass('up_arrow')
$("div.slide").click(function(){
$("div.slide").toggleClass('up_arrow').toggleClass('down_arrow');
$(".tst").slideToggle( 'slow', function(){
});
});
</script>

有没有一种方法可以让它只滑下您点击的那个而不是所有的 .tst div?

编辑:请求的 HTML 标记:

<div class="slide"></div>
<div class="tst">
<div class="courseinfo">
<ul>
<li>
<ul>
<li><b>»</b>&nbsp;<a href="#">info</a></li>
<li>info</li>
<li><span class="rowUCAS">info</span></li>
<li><a href="#">External link</a></li>
</ul>
</li>
</ul>
</div>
</div>

最佳答案

不是在函数内部使用选择器,而是使用 $(this) 来定位被点击的元素。在你的情况下:

<script type="text/javascript">
$('.tst').hide();
$("div.slide").addClass('up_arrow')
$("div.slide").click(function(){
$(this).toggleClass('up_arrow').toggleClass('down_arrow');
$(".tst").slideToggle('slow')
});
</script>

选择器 $(this) 以触发事件的元素为目标。

按照给定的 HTML 标记:

<div class="slide"></div>
<div class="tst">
...
</div>

下面的选择器可以工作:

$("div.slide").click(function(){
$(this).toggleClass('up_arrow').toggleClass('down_arrow');
$(this).next().slideToggle('slow')
});

您可能有兴趣将 .tst 嵌套在 div.slide 中,如下所示:

<div class="slide">
<div class="tst">
...
</div>
</div>

在这种情况下,下面的选择器会起作用

$("div.slide").click(function(){
$(this).toggleClass('up_arrow').toggleClass('down_arrow');
$(this).children('.tst').slideToggle('slow')
});

希望对您有所帮助!

关于jquery - 多个 SlideToggle jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18683259/

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