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