0

問題

サイド ナビゲーションを組み立てましたが、これまでのところ問題なく動作しています。ユーザーがトグルされたパネルを使い終わったら簡単に閉じることができるように、トグルされるパネルの小さな「閉じる」ボタンをフェードインしようとしています。

私はそれをやっているようなものを用意していますが、一方のナビゲーション項目から別のナビゲーション項目をクリックすると、乱雑で同期が取れていないことがわかります。

jsフィドル

http://jsfiddle.net/visualdecree/4A23Z/37/

jQuery

$(".sn a").on('click',function(){ // Sidenav panel script

    var panID = $("#" + $(this).data('panel') );

    $("div[id*='sn-pan-']")
    .stop()
    .hide({slide:'toggle'}, 400);

    $(panID)
    .css({'left' : '139px','overflow':'visible'})
    .stop()
    .animate({width:'toggle'}, 400)

        $(".control-view").stop().fadeOut("slow");  // Fadein menu close button
    $(".control-view").not(":visible").stop().delay(400).fadeTo("fast", 0.33);   

});

$('.sn').click(function(e) {
    $('ul.sidenav li').not(this).removeClass('active'); // Active class removal / add
    $(this).stop(true, true).toggleClass("active");    
});

$(".control-view").hover( // Hover effect for menu close button
    function () {
    $(".control-view").stop().hide().fadeTo("fast", 1); // Hover in
   }, 
    function () {
    $(".control-view").fadeTo("normal",0.33); // Fade back to previous set opacity
});

$('.control-view').click(function(e) {
        $("div[id*='sn-pan-']")
        .stop()
        .hide({slide:'toggle'}, 400);

        $('ul.sidenav li').not(this).removeClass('active');

        $(".control-view").stop().fadeOut("fast");
});

私のコードが乱雑である可能性があることを感謝します。私は学んでいるので、あなたが助けることができるものは何でも感謝し、私と一緒に持ち帰ります。

4

1 に答える 1

1

ラインを変えてみる

$(".control-view").stop().fadeOut("slow");  // Fadein menu close button

に

$(".control-view").hide();  // Fadein menu close button

基本はセレクター

$(".control-view").stop().fadeOut("slow");

すべてのアンカー (<a class="control-view"></a>) をフェードアウトし、すぐに $(".control-view").not(":visible" で表示されているものを見つけようとしています....しかし、実際にはまだ隠されているアンカーはありません。

于 2012-09-06T14:22:48.860 に答える