1

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

有没有办法让它只滑下你点击的那个而不是所有的.tstdiv？

编辑：根据要求进行 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>
4

1 回答 1

0

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

希望能帮助到你！

于 2013-09-08T11:54:36.910 回答