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需要向上滑动并显示。

我知道我要求太多，但任何帮助都会受到高度赞赏。

FIDDLE 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>

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

2 个答案: