SlideToggle導航內容？

Question

我想通過在我的導航中通過名稱定位內容來在其中滑動具有不同內容的div。

我有這個已經：

$(".div1, .div2, .div3").hide(); 

$(document).ready(function(){ 

    $("nav a").click(function() { 
    var divname= this.name; 
    $("."+divname).siblings().slideUp(500, function() { 
    $("."+divname).slideToggle(); 
}); 
}); 
}); 

<nav> 
<a name="div1">SlideToggle Div 1</a> 
<a name="div2">SlideToggle Div 2</a> 
<a name="div3">SlideToggle Div 2</a> 
</nav> 

<div id="container"> 
<div class="div1">Content Div 1</div> 
<div class="div2">Content Div 2</div> 
<div class="div3">Content Div 3</div> 
</div> 

我想，每一個格向上滑動，再與新的div的內容slidesdown，即定位在menue等等。

問題與腳本：

有了兩個div它的工作。添加第三個確實會使它向下滑動並向上滑動。添加第四個確實會使其滑落，向上滑動並向下滑動等等。兄弟姐妹的想法一定是錯的嗎？

謝謝。

Answer 1

有一個工作jsfiddle頁面，所以看看this。我在你的代碼上做了一些工作，看看這是你想要的。 更新了代碼立即重試鏈接。

$(".div1, .div2, .div3").hide(); 
$(document).ready(function() { 
    var firstTime = true; 
    $("nav a").click(function() { 
    var divname = this.name; 
    if (!firstTime) { 
     if ($(".slid").hasClass(divname)) { 
      firstTime = true; 
      $(".slid").removeClass("slid").slideUp(); 
     } else { 

      $(".slid").removeClass('slid').slideUp(500, function() { 
       $("." + divname).slideToggle().addClass("slid"); 

      }); 
     } 
    } else { 
     $("." + divname).slideDown().addClass("slid"); 
     firstTime = false; 
    } 

    }); 
});