jquery - jquery，带有 prev 和 next 的 div 以 slideDown 效果显示

Question

HTML：

一些divs带有 next 和 prevdivs的内部来向前和向后导航。单击某个下一个 div 时，应该可以看到以下 div 并带有 slideDown 效果。但这实际上并没有发生。代码如下：

<div class="q_group" id="q_group_1">

    <div class="prev_next">

        <div class="next" target_div="q_group_2" >Next</div>
    </div>  
</div>

<div class="q_group invisible" id="q_group_2">

    <div class="prev_next">

    <div class="prev" target_div="q_group_1" >Prev</div>
    <div class="next" target_div="q_group_3" >Next</div>

   </div>   

</div>

 <div class="q_group invisible" id="q_group_3">

        <div class="prev_next">

           <div class="prev" target_div="q_group_2" >Prev</div>

    </div>  

 </div>

CSS：

<style type="text/css">

#q_group_1{

    background-color: green;
}
#q_group_2{

    background-color: red;
}

#q_group_3{

    background-color: yellow;
}

.q_group{

    width: 300px;
    height: 200px;
}

.invisible{
    display: none;
}

.prev,.next{
    width: 60px;
    background-color: green;
    color: #FFFFFF;
    cursor: pointer;


}

.prev{
    float: left;
}

.next{
    float: right;
}

</style>

Javascript：

$(document).ready(function(){


$(document).on('click','.next, .prev',function(){


    $elem = $(this);

    var target_div = $elem.attr('target_div');

    $elem.slideUp('slow',function(){

    $("#"+target_div).slideDown().children().show();    

    });




});

});

如何实现预期的功能？

编辑：这里是 js fiddel

Answer 1

Try

$(document).ready(function () {
    $(document).on('click', '.next, .prev', function () {
        $elem = $(this);
        var target_div = $elem.attr('target_div');
        $elem.closest('.q_group').stop(true, true).slideUp('slow', function () {
            $("#" + target_div).stop(true, true).slideDown();
        });
    });
});

Demo: Fiddle

Answer 2

你的代码是绝对正确的，你所做的只是滑动下一个/上一个 div 而不是整个 div。更正的代码：

$(document).ready(function(){


  $(document).on('click','.next, .prev',function(){


    $elem = $(this);

    paren=$(this).parent().parent();

    var target_div = $elem.attr('target_div');

    paren.slideUp('slow',function(){

    $("#"+target_div).slideDown().children().show();    

    });

  });

});

演示：jsfiddle