0

現在、Webサイトの上部に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

クラスは一意であることを意図したものではなく、ある意味での参照であることを意図しています。

言い換えれば、2 つのクラスに同じ名前を付けると (違いは 1 文字だけ)、クラスの目的が無効になります。それらに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>

これで、2 つの同一の 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 に答える