Question

我目前在我的网站顶部有2个面板（div）。当您单击链接时，它将下拉面板。当你点击另一个链接时，我希望它向上滑动任何打开的div然后一旦它向上滑动，打开被点击的div。

我目前有这个：

$(document).ready(function(){
$(".btnSlideL").click(function(){
    $("#clientLogin").slideUp('fast');
  $("#languages").slideToggle("fast");
  $(this).toggleClass("active");
});
});

$(document).ready(function(){
$(".btnSlideC").click(function(){
  $("#languages").slideUp('fast');
  $("#clientLogin").slideToggle("fast");
  $(this).toggleClass("active");
});

}）;

和HTML：

<div id="languages" class="topPanel">
    <div class="topPanelCont">
        languages
    </div>
</div>

<div id="clientLogin" class="topPanel">
    <div class="topPanelCont">
        client login
    </div>
</div>

<div id="container">
    <div id="containerCont">
        <div id="headerTop">
            <a href="#" title="#" class="btnSlideL">Languages</a>
            <a href="#" title="#" class="btnSlideC">Client Login</a>
        </div>

但我觉得它有点啰嗦。

然后会发生什么，Div会在点击时打开，但是如果你点击另一个，它会在顶部打开，而另一个在下面关闭。

我想要实现的一个很好的例子是here：

点击顶部的链接。

Answer 1

您希望在结束动画结束后发生开场动画。这可以通过提供第一个动画的回调来完成：

$("#clientLogin").slideUp('fast', function() { 
  $("#languages").slideToggle("fast"); 
});

Answer 2

类并不是唯一的，它们本来就是......好吧，在某种程度上引用。

换句话说，有两个名为相同的类（唯一的区别是一个字母）会破坏一个类的目的。你通过给他们一个id来使他们成为独一无二的。

因此，在您的代码中，将类名前面的字母带入id

    <div id="headerTop">
        <a href="#" title="#" class="btnSlideL">Languages</a>
        <a href="#" title="#" class="btnSlideC">Client Login</a>
    </div>

像这样...

    <div id="headerTop">
        <a href="#" title="#" id="L" class="btnSlide">Languages</a>
        <a href="#" title="#" id="C" class="btnSlide">Client Login</a>
    </div>

现在您不必拥有两个相同的jquery函数，只有

$(document).ready(function(){
$(".btnSlide").click(function(){
  $(".topPanel").slideUp('fast');
  $(this).toggleClass("active");
});
$("#L").click(function() {
  $('#languages').slideDown("fast");
});
$("#").click(function() {
  $('#clientlogin').slideDown("fast");
});

我如何打开div关闭所有其他div？

2 个答案: