4

我已经通过单击不同的链接创建了一个向下滑动不同 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");
    });
4

4 回答 4

1

如果您正在滑动的 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){...} );
于 2011-01-04T22:14:17.490 回答
1

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

于 2011-01-04T21:21:18.610 回答
1

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

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

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

于 2011-01-04T21:22:29.220 回答
0

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

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

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

// repeat for each click handler
于 2011-01-04T21:25:11.873 回答