Question

对于在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>

所以，我有一个名为＆＃34; top＆＃34;的div，在该div的底部，我显示三个链接，一个，两个和三个。在该div之下，还有3个其他div，全部显示：none，我想显示那些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

我试过这样：

$("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" );
});

部分有效！一个和两个可以slideToggle。如果两个是打开的，一个被点击，两个关闭，当它完成时，一个slideToggles打开。

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

此

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

Answer 1

使用jQuery的动画回调：

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

希望有所帮助。

在其他人关闭后滑开div

1 个答案: