0

次のスライド パネルがあり、チュートリアルなどを使用してまとめました...

$(document).ready(function() {

$(".dropdown dt a").click(function() {
    $(".dropdown dd #panel").slideDown(150);
});

$(".dropdown dd #panel a").click(function() {

    $(".dropdown dd #panel").slideUp(150);

});

var myTimeout = null; 
$(".dropdown").bind("mouseleave", function() { 
    myTimeout = window.setTimeout(function() { 
         $(".dropdown dd #panel").slideUp(150); // <-- 1000ms  
    }, 1000);$('.dropdown dt a').removeClass('active'); 
}); 

$(".dropdown dd #panel").bind("mouseenter",function() { 
    window.clearTimeout(myTimeout); 
});

});

ただし、クリックしてパネルを表示する方法がわかりません。

現在、クリックするとパネルが下にスライドし、パネルに出入りするとスライドして戻ります。

クリックしてパネルを表示したら、クリックして閉じることもできますか?

したがって、マウスを離すか、ボタンをもう一度クリックするという 2 つの方法で閉じることができます。おそらく、アクティブなクラスを追加して、矢印または何かを開いてから閉じるように変更できますか?

クリックしてスライドバックアップ機能を追加するのを手伝ってくれる人はいますか?

できればどうもありがとう:)

Thanks guys.

ブライアンのコードを追加しようとしましたが、完全に壊れてしまいました。明らかに正しい場所に配置していません:(

編集

ブライアンのアドバイスを追加...

$(document).ready(function() {



$(".dropdown dt a").click(function(){
    if($(".dropdown dd #panel").hasclass('open'){
        $(".dropdown dd #panel").slideDown(150).addClass('open');
    } else {
       $(".dropdown dd #panel").slideUp(150).removeClass('open');
    }
});         


$(".dropdown dd #panel a").click(function() {
    $(".dropdown dd #panel").slideUp(150).removeClass('open');;
});

var myTimeout = null; 
$(".dropdown").bind("mouseleave", function() { 
    myTimeout = window.setTimeout(function() { 
         $(".dropdown dd #panel").slideUp(150); // <-- 1000ms  
    }, 1000);$('.dropdown dt a').removeClass('active'); 
}); 

$(".dropdown dd #panel").bind("mouseenter",function() { 
    window.clearTimeout(myTimeout); 
});

});

4

2 に答える 2

0

例 4a http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/をご覧ください。

于 2010-11-01T16:09:47.107 に答える
0

閉じるトリガーが 2 つあるため、パネルの状態を追跡する必要があります (したがって、単純なトグル リスナーでは十分ではありません)。js 変数を追加するか (まあまあですが)、クラスを使用して (より良い) 追跡することができます。次に、条件付きでクリック リスナーをテストして、何をすべきかを判断します。

$(".dropdown dt a").click(function(){
    if($(".dropdown dd #panel").hasClass('open'){
        $(".dropdown dd #panel").slideDown(150).addClass('open');
    } else {
       $(".dropdown dd #panel").slideUp(150).removeClass('open');
    }
});

内部アンカータグにもあるクローズリスナーに removeClass メソッドを追加してください。

$(".dropdown dd #panel a").click(function() {
    $(".dropdown dd #panel").slideUp(150).removeClass('open');;
});
于 2010-11-01T16:01:56.450 に答える