0

我目前在我的网站顶部有 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，一旦单击就会打开，但如果单击另一个，它会在顶部打开它，而另一个在下面关闭。

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

单击顶部的链接。

4

2 回答 2

0

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

$("#clientLogin").slideUp('fast', function() { 
  $("#languages").slideToggle("fast"); 
});
于 2010-07-27T09:25:03.947 回答
0

类并不意味着是唯一的，它们意味着......嗯，某种意义上的引用。

换句话说，让两个类命名相同（唯一的区别是一个字母）违背了类的目的。您可以通过给它们一个 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");
});
于 2010-07-27T09:30:49.243 回答