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')
});

希望它有所帮助！

多个SlideToggle jQuery

1 个答案: