如果任何其他 div 使用 jQuery 向下滑动，则 SlideUp 一个 div

Question

我创建了一个功能，可以通过单击不同的链接来向下滑动不同的 div。以下是基本代码。但是，有一个小问题，例如，如果我单击第一个链接，它会向下滑动 div。现在，如果我单击下一个链接，它会保留第一个 div，并向下滑动第二个 div。不过，我想这样做，如果有任何 div 向下滑动，并且我单击任何链接，它应该向上滑动前一个 div 并向下滑动新的 div。我将感谢您在这方面的帮助。谢谢。

$("a.about").click(function(){
    $("#about").slideDown("slow");
    });

$("a.info").click(function(){
    $("#info").slideDown("slow");
    });

$("a.contact").click(function(){
    $("#contact").slideDown("slow");
    });

Answer 1

通常，您可以通过向您希望能够控制的所有 div 添加一个类，然后在每次单击开始时对该类进行 SlideUp() 操作来完成此操作。

$('a.xxx').click(function(){
    $('.sliders').slideUp()
    // slide down other div here
});

这实际上会使所有带有“滑块”类的 div 向上滑动，但会产生先前单击的 div 向上滑动的错觉，因为只有一个应该向下滑动。

Answer 2

您可能想查看 jQuery UI 手风琴。

Answer 3

如果您正在滑动的 div 是同级的，并且类名和 ID 之间的对应关系如所描述的，您可以执行以下操作：

var links = ['a.about','a.info','a.contact','a.etc'];

$( links.join(',') ).click( function(e){
  e.preventDefault();
  $('#' + this.className).siblings().slideUp('slow').end().slideDown('slow');
});

如果所有链接都在某种容器内，您可以进一步简化：

$('div#nav-container').find('a').click( function(e){...} );

Answer 4

最简单的方法是为您尝试向上/向下滑动的所有元素提供额外的通用类名，然后使用锚点上的 href 属性将实际锚点连接到元素。下面的 javascript 代码（对 HTML 进行了更改）将执行与当前 javascript 相同的功能，并且可以轻松添加更多滑块：

# the html
<a class='about slide-control' href='#about'>toggle the about section</a>
<a class='info slide-control' href='#info'>toggle the info section</a>
<a class='contact slide-control' href='#contact'>toggle the contact section</a>

<div class='slider' id='about'>
    this is the about section
</div>
<div class='slider' id='info'>
    this is the info section
</div>
<div class='slider' id='contact'>
    this is the contact section
</div>    

# the javascript
$('a.slide-control').click(function() {
    $('div.slider').slideUp();
    var target = $(this).attr('href');
    $(target).slideDown('slow');
});

您只需添加正确的 HTML 即可添加新滑块：

<a class='slide-control' href='#new_section'>Tell me more about this new section!</a>

<div class='slider' id='new_section'>
    This is a great paragraph about the new section on our website!
</div>

---

或者，您也 可以可以使用现有的类，只需在 .slideDown 之前添加对其他元素的 .slideUp 方法调用：

$('a.about').click(function() {
    $("#info").slideUp('slow');
    $("#contact").slideUp('slow');
    $("#about").slideDown('slow');
});

// repeat for each click handler