jquery - ScrollTop 和 slideToggle 相互混淆

Question

当我打开导航时，我可以点击一个 li-tag，它应该会带我到相应的面板并打开它(并关闭其他打开的面板)。

我无法开始工作的是 scrollTop 功能。

第一次它会将我带到相应的标题并打开它。我第二次尝试打开面板时，面板的标题会过高。

HTML:

<div class="wrapper">
    <div class=test>MENU</div>
    <ul class="nav">
        <li class="1">Diensten</li>
        <li class="2">Vacatures</li>
        <li class="3">Contact</li>
    </ul>
</div>
<div class="filling">
    <p></p>
    <div class="1 item">
        <div class="head">Titel 1</div>
        <div class="body">Hier komt de inhoud</div>
    </div>
    <div class="2 item">
        <div class="head">Titel 2</div>
        <div class="body">Hier komt de inhoud</div>
    </div>
    <div class="3 item">
        <div class="head">Titel 3</div>
        <div class="body">Hier komt de inhoud</div>
    </div>
    <p></p>
</div>

JS:

$(function () {
    $('.nav, .body').hide();
})

$('.test').click(function () {
    $('.nav').slideToggle();
});

$('.nav li').click(function(){
    var e = $(this).attr('class');
    var k = "." +e;
    $('.nav').slideToggle();

    $('html,body').animate({
        scrollTop: $(k).slice(1).offset().top-28},'slow');

    //something wrong here   
    var b = $('.body');
    if (b.is(':visible')) {
        b.slideUp({queue:false});
    }

    $(k).slice(1).children('.body').slideToggle();
});

CSS:

.wrapper {
    position:fixed;
    width:100%;
    top:0;
}
ul {
    width:100%;
    background-color:pink;
}
li {
    cursor:pointer;
    text-align:center;
}
li:hover {
    font-weight:bold;
    background-color:purple;
    color:white;
}
.test {
    width:100%;
    background-color:red;
    text-align:center;
    font-size:20px;
    cursor:pointer;
    color:white;
}
.filling {
    width:100%;
    background-color:yellow;
}
p {
    height:800px;
}
.item {
    width:100%;
    text-align:center;
}
.head {
    color:white;
    background-color:black;
    font-weight:bold;
}
.body {
    height:50px;
    background-color:grey;
}

http://jsfiddle.net/stwq8ytk/4/

• 尝试点击 MENU > Diensten(有效)。
• 现在点击 MENU > Vacatures(这不起作用)。

Answer 1

像这样将动画 scrollTop 放在 slideToggle 的回调中:

$(function () {
    $('.nav, .body').hide();
})

$('.test').click(function () {
    $('.nav').slideToggle();
});

$('.nav li').click(function(){
    var e = $(this).attr('class');
    var k = "." +e;
    $('.nav').slideToggle(function(){
        $('html,body').animate({
        scrollTop: $(k).slice(1).offset().top-28},'slow');
    });



    //something wrong here   
    var b = $('.body');
    if (b.is(':visible')) {
        b.slideUp({queue:false});
    }

    $(k).slice(1).children('.body').slideToggle();

});

Here is the fiddle working