javascript - 如何将 jquery Slidetoggle 与多个内容框一起使用？

Question

我的页面中有一些内容框，我需要切换这些内容框下的一些内容。

我的内容框如下所示:

<div class="package">
    <div class="banner-wrap">
        <figure class="featured-thumbnail">
            <a href="#">
                <img src="img/packages/package1.png" alt=""/>
            </a>
        </figure>
        <div class="event">
            <p class="readmore">read more <i class="fa fa-chevron-circle-down"></i></p>
        </div>

        <div class="more-info">
            <p>----- this is my toggling contents ---- </p>
        </div>
    </div> 
</div>

<div class="package">
    <div class="banner-wrap">
        <figure class="featured-thumbnail">
            <a href="#">
                <img src="img/packages/package1.png" alt=""/>
            </a>
        </figure>
        <div class="event">
            <p class="readmore">read more <i class="fa fa-chevron-circle-down"></i></p>
        </div>

        <div class="more-info">
            <p>----- this is my toggling contents ---- </p>
        </div>
    </div> 
</div>

<div class="package">
    <div class="banner-wrap">
        <figure class="featured-thumbnail">
            <a href="#">
                <img src="img/packages/package1.png" alt=""/>
            </a>
        </figure>
        <div class="event">
            <p class="readmore">read more <i class="fa fa-chevron-circle-down"></i></p>
        </div>

        <div class="more-info">
            <p>----- this is my toggling contents ---- </p>
        </div>
    </div> 
</div>

我需要的是当用户点击.readmore时我想切换.more-info DIV。我就是这样尝试的。但它只能切换第一个内容框中的内容。

$(".readmore").click(function() {
    $(".more_info").animate({ opacity: 1.0 },200).slideToggle(500, function() {
        $(".readmore").html($(this).is(':visible') ? "read less <i class='fa fa-chevron-circle-up'></i>" : "read more <i class='fa fa-chevron-circle-down'></i>");
    });
}); 

谁能告诉我如何修改这段代码吗？

<强> Fiddle

Answer 1

看看这个:

$(".readmore").click(function () {
    var $this = $(this);
    $this.parent().siblings(".more-info").slideToggle().promise().done(function () {
        $this.html($(this).is(':visible') ? "read less <i class='fa fa-chevron-circle-up'></i>" : "read more <i class='fa fa-chevron-circle-down'></i>");
    });
});

或者简单地说

$(".readmore").click(function () {
    var $this = $(this);
    $this.parent().siblings(".more-info").slideToggle(function () {
        $this.html($(this).is(':visible') ? "read less <i class='fa fa-chevron-circle-up'></i>" : "read more <i class='fa fa-chevron-circle-down'></i>");
    });
});

<强> Fiddle