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

您可能需要查看jQuery UI accordion。

Answer 2

你通常可以通过向你想要控制的所有div添加一个类来实现这一点，然后在每次点击开始时滑动该类。

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

这实际上会使用类'滑块'向上滑动所有div，但会让先前点击的div向上滑动，因为只有一个应该停止。

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>

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

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

// repeat for each click handler

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

4 个答案: