javascript - SlideDown 仅单击元素 jQuery

Question

我的网站中有一些具有相同元素的菜单，我想使用 jQuery 中的 SlideDown 仅向下滑动单击的菜单

但现在当我单击一个菜单时，所有菜单都会向下滑动

HTML

        <div id="sidebar-right" >



                <div class="sidebar-menu">
                        <span class="sidebar-post">Last Posts</span>
                                <span class="sidebar-post-slide">+</span>

                               <div style="margin-top:-35px"></div>
                               <div class="sidebar-text">
Some content
                            </div>
                </div>
                <!-- S2 -->
                                <div class="sidebar-menu">
                        <span class="sidebar-post">Last Comments</span>
                                <span class="sidebar-post-slide">+</span>

                      <div class="sidebar-text">          
Some content
                        </div>
                </div>
                <!-- End S2 -->

         </div>   

和 jQuery 端

$(function() {
$('.sidebar-post-slide').click(function () {
if ( $('.sidebar-text').is( ":hidden" ) ) {
$('.sidebar-text').slideDown(800);
} else {
$('.sidebar-text').hide(800);
}
});
});

Answer 1

您需要向下滑动同级 sidebar-text 元素，而不是所有 sidebar-text 元素

$(function() {
    $('.sidebar-post-slide').click(function () {
        //find the sibling sidebar-text element and complete any queued animations
        var $stext = $(this).siblings('.sidebar-text').stop(true, true);
        if ( $stext.is( ":hidden" ) ) {
            $stext.slideDown(800);
        } else {
            $stext.hide(800);
        }
    });
});

演示:Fiddle