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

【问题标题】：SlideUp a div if any other div is slided down with jQuery如果使用 jQuery 向下滑动任何其他 div，则 SlideUp 一个 div
【发布时间】：2011-06-03 16:00:19
【问题描述】：

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

【问题讨论】：

如果只有三个链接，为什么不为其他id 元素添加对slideUp 事件的调用，例如$('#info').slideUp('slow'); 在 $('a.about').click 和类似的？
大约有 6 个链接.. 我认为这种方式可能会很乱而且效率不高.. 是这样吗？
是的.. 将一个公共类附加到这些滑块.. 然后在这个公共类上使用 slideUp，在您的 slideDown 调用之前。

标签： jquery slideup slidedown

【解决方案1】：

最简单的方法是为您尝试向上/向下滑动的所有元素提供一个额外的通用类名，然后使用锚点上的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

【讨论】：

【解决方案2】：

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

【讨论】：

不幸的是，如果他向锚添加多个类（他可能已经或可能还没有），这将打破
这是真的。在没有他的 html 的情况下，我的建议是基于一些假设——这些类的简单案例是一个。

【解决方案3】：

您可能想查看jQuery UI accordion。

【讨论】：

【解决方案4】：

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

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

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

【讨论】：