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

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件事。

如果用戶打開，說第二個鏈接，然后，他想通過單擊相同的鏈接來關閉它，那么div應該向上滑動（而不是像現在這樣向下滑動）。

與此類似，如果用戶打開鏈接no2，然后要打開鏈接no1，則在單擊之后，該div將需要向上滑動並顯示。

我知道我要求太多，但是任何幫助將不勝感激。

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

Answer 1

您可以執行以下操作：

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

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

Answer 2

我建議使用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>