菜单抽屉切换（向上/向下滑动）

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>