jquery - 多个 SlideToggle jQuery

Question

我有一个 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>

Answer 1

不是在函数内部使用选择器，而是使用 $(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')
});

希望对您有所帮助!