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

我已经做了一个功能，通过点击不同的链接滑下不同的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");
    });

---

您可能需要查看。

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

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

---

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

最简单的方法是为尝试向上/向下滑动的所有元素提供一个额外的通用类名，然后将实际锚连接到元素，使用锚定上的

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');
});

---

如果要滑动的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){...} );

---

如果只有三个链接，为什么不为其他

id

元素添加对

slideUp

事件的调用，例如

$（'#info'）。slideUp（'slow'）在
$（'a.about'）。单击
和类似内容？大约有6个链接。。我想那条路可能很乱，效率也不高。。是吗？是的。。将公共类附加到这些滑块。。然后在调用
slideDown
之前，在此公共类上使用
slideUp
。不幸的是，如果他向锚添加了多个类（他可能已经添加了，也可能没有添加），则此操作将中断。这是真的。在没有他的html的情况下，我的建议是基于一些假设的——这些类的简单情况就是一个。
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){...} );