菜單抽屜切換（向上/向下滑動）

Question

我有一個簡單的菜單，從中我使用jQuery來切換少量DIV的可見性。代碼非常簡單，就像下面的代碼一樣，如果我不要求太多，我可以使用一些其他功能的幫助。

<div id="one" class="navLinks"> content 1 </div> 
<div id="two" class="navLinks"> content 2 </div> 
<div id="three" class="navLinks"> content 3 </div> 
<div class="nav"> 
    <nav> 
     <a href="#one">1</a> 
     <a href="#two">2</a> 
     <a href="#three">3</a> 
     <a href="http://google.com">Normal Link</a> 
    </nav> 
</div> 

$('nav a').click(function() { 
    $('.navLinks').hide(); 
     $(this.getAttribute('href')).slideToggle('slow') 
}); 

所以，目前，如果鏈接，在用戶點擊，一個div將會從頂部滑動，但不同的是，我將需要2件更多的事情。

如果用戶打開，讓我們說鏈接2號，然後，他想通過點擊相同的鏈接關閉它，div應該向上滑動（而不是像現在這樣向下）。

與此相似，如果用戶打開鏈接no2，之後想打開鏈接no1，點擊後，該div將需要向上滑動並顯示。

我知道我問的太多了，但任何幫助將grely表示讚賞。

FIDDLE http://jsfiddle.net/4rfYB/38/

Answer 1

我建議使用jQuery的not()排除那些被隱藏的請求的元素。
這樣，您可以隱藏所有不是請求的內容區域。

我也使用slideUp('slow')而不是hide()，純粹是出於文體原因。

$('nav a').click(function() { 
 
    var $requested = $(this.getAttribute('href')); 
 
    $('.navLinks').not($requested).slideUp('slow'); 
 
    $requested.slideToggle('slow') 
 
});

.navLinks { 
 
    display: none; 
 
    color: white; 
 
} 
 
div#one { 
 
    background: red; 
 
    height: 100px; 
 
} 
 
div#two { 
 
    background: blue; 
 
    height: 80px; 
 
} 
 
div#three { 
 
    background: black; 
 
    height: 60px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="nav"> 
 
    <nav> 
 
    <a href="#one">1</a> 
 
    <a href="#two">2</a> 
 
    <a href="#three">3</a> 
 
    </nav> 
 
</div> 
 
<div id="one" class="navLinks">content 1</div> 
 
<div id="two" class="navLinks">content 2</div> 
 
<div id="three" class="navLinks">content 3</div>

Answer 2

你可以做這樣的事情：

$('nav a').click(function() { 
    $(this.getAttribute('href')).toggleClass('open').slideToggle('slow',function() { 
     $(this).siblings('.open').slideToggle('slow').toggleClass('open'); 
    }); 
}); 

http://jsfiddle.net/4rfYB/39/