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

Answer 2

另一种选择是使用方法closest()。但在你的情况下，阿伦的答案更好。

slideDown只点击了元素jQuery

2 个答案: