Question

如何在jQuery中使用this来点击+符号以滑动.expand元素？我想使代码简单，并对页面上的所有文章使用相同的脚本。一种解决方案是为每个article元素使用唯一的id并检测该id的每次单击，但是我猜这个脚本将是不必要的大而复杂的。

如何改进下面的脚本以便能够将它用于多篇文章？也许使用slideDown和slideUp代替slideToggle更容易/更好？

<article class="post">
    <header>
        <h2>Headline</h2>
    </header>
    <img src="images/test.jpg">
    <div class="expand">Text</div>
    <div class="click">+</div>
</article>

<article class="post">
    <header>
        <h2>Headline</h2>
    </header>
    <img src="images/test.jpg">
    <div class="expand">Text</div>
    <div class="click">+</div>
</article>

$(document).ready(function(){
    $(".expand").hide();
    $(".click").click(function(){ 
        $(".expand").slideToggle();
    });
});

Answer 1

您可以使用DOM遍历从单击的.expand元素中查找相关的.click。

您可以使用点击处理程序中的this关键字来获取引发事件的.click元素的引用。在那里，您可以使用prev()方法查找所需的.expand。试试这个：

$(".click").click(function(){ 
    $(this).prev('.expand').slideToggle();
});

Working example

另请注意，最好使用CSS设置页面中元素的初始状态。

Answer 2

此代码获取点击元素的父元素，该元素具有.click类，并找到具有.expand类的子元素。

$("body").on("click", ".click", function(){
     $(this).parent().children(".expand").slideToggle();
});

具有相同类和相同脚本的SlideToggle元素

2 个答案: