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

演示：小提琴

Answer 2

另一种选择是使用方法closest（）。但在你的情况下，阿伦的安威瑟更好。