0

我认为对于有 jquery 经验的人来说，这不是一个困难的问题，但不幸的是，我不是。我确实四处搜索，发现了一些类似的问题，但我无法将提到的解决方案中的点联系起来。

<div id="Top">
 <p>Lorem ipsum dolor</p>
 <ul class="links">
  <li class="one"><a href="#">One</a></li>
  <li class="two"><a href="#">Two</a></li>
  <li class="three"><a href="#">Three</a></li>
 </ul>      
</div>

<div id="one">
 <p>Lorem ipsum</p>
</div>
<div id="two">
 <p>Lorem ipsum</p>
</div>
<div id="three">
 <p>Lorem ipsum</p>
</div>

所以，我有一个名为“top”的 div，在该 div 的底部，我显示三个链接，一、二和三。在该 div 下方，还有 3 个其他 div，全部显示：无，如果单击相应链接之一，我想显示这些 div。但是，我只想在一个打开的 div 关闭后显示一个 div。此时，一个正在关闭，另一个正在打开。

我尝试了很多东西，但都没有成功。我希望有人可以帮助我提供我可以理解的解决方案！

作为一个新手，我可能走错了路，但无论如何，我尝试过的事情：

$("li.one a").click(function(event){
    event.preventDefault();
    $("#one").slideToggle( "slow", function(){
        $("#two, #three").slideUp( "slow" );
    });
});

这仅适用于 li.one a，同样适用于 li.two a 和 li.three a

我试过这样：

$("li.een a").click(function(event){
    event.preventDefault();

    if( $( "#een" ).hasClass( "open" ) ) {
        $("#een").slideUp( "slow" ).removeClass("open");
    }
    else {
        $("#een").slideDown( "slow" ).addClass("open");
    };

});

好的，我查看了 Gal 的答案并做了这个：

$("li.one a").click(function(event){
    event.preventDefault();
    $('#two').slideUp(function(){
        $('#one').slideToggle();
    });
});

我把它们放进去，这样两个和三个就可以滑开

$("li.two a").click(function(event){
    event.preventDefault();
    $("#two").slideToggle( "slow" );
});

$("li.three a").click(function(event){
    event.preventDefault();
    $("#three").slideToggle( "slow" );
});

它部分有效！一和二可以滑动切换。如果打开了两个并且单击了一个，则关闭了两个，完成后，打开了一个滑动切换。

这就是它开始出错的地方......

这个

$('#two').slideUp(function(){

只让#two 向上滑动，但如果#three 打开，则在单击 li.one a 时它不会关闭。

我试过了

$('#two, #tree').slideUp(function(){

但这会产生错误的行为。

$("li.one a").click(function(event){
    event.preventDefault();
    $('#two').slideUp(function(){
        $('#one').slideToggle();
    });
});
4

1 回答 1

0

使用 jQuery 的动画回调：

$('#element1').slideUp(function(){
    $('#element2').slideDown();
});

希望有帮助。

于 2013-10-17T10:49:46.010 回答