1

私はjQueryの「関数」で立ち往生しています（私は基本的なことしか知りません）。レスポンシブウェブサイトで作業していて、ユーザーが矢印アイコン→[>]（a＃side-toggle）を押すと、メニュー（＃header-toggle）がスライドして外に出て、アイコンが左側にスライドして表示されたままになります、およびテキストが変更され、矢印→[<]が変更されます。

このアイコンをもう一度クリックすると、メニューは元の場所に戻り、アイコンは→[>]になります。完全。

最初の機能では、ユーザーがメニューの使用中にコンテンツを押さないように、オーバーレイDIVが表示されます。このオーバーレイをクリックすると、メニューがスライドして戻り、オーバーレイが消えます。普通。しかし、テキストは変更されません、それはそのように立ち往生しています→[<]

テキストをもう一度クリックしてメニューを表示すると、この→[>]に変わり、メニューが表示されません（関数は実際には元の状態に戻りました）。もう一度クリックすると、関数が適切に切り替わります。

これを修正する必要があります。ユーザーはこのアイコンを1回押すだけで、メニューが表示されます。

可能であればコードをクリーンアップしてください。これも混乱していると思います。

これがjsfiddleです！

問題はJSにあります、ここに抜粋があります：

$('#side-overlay').click(function() {
    $(this).hide();
    $("#header-toggle").animate({ 
        left: "-200px",
        boxShadow: "0px 0px 0px 0px rgba(0,0,0,0)"
      }, { duration: 700, easing: "easeInOutBack", queue: false });
    $("#side-handler").animate({ 
        left: "0px",
      }, { duration: 700, easing: "easeInOutBack", queue: false });
    $("a#side-toggle").text($(this).text() == '>' ? '<' : '>');
});

ご協力いただきありがとうございます！

4

2 に答える 2

1

私は問題を見つけたと思います。

jQueryトグルメソッドはclick、指定されたセレクターのイベントでトリガーされます。つまり、このイベントを実行せずにオーバーレイとメニューを手動で「非表示」または「表示」すると、切り替えられたオブジェクトの内部状態と同期しなくなります。

つまり、矢印をクリックすると、トグルの内部動作により、次のクリックで非表示イベントが発生しますが、ユーザーは手動で要素を非表示にしたオーバーレイをクリックしました。次に、ユーザーが矢印をクリックすると、要素がすでに非表示になっている場合でも、hideイベントが発生します。

コードは次のとおりです。フィドル

var side = $('a#side-toggle');
var overlay = $("#side-overlay")
var header = $("#header-toggle");
var sideHandler = $("#side-handler");

side.toggle(show,hide);

overlay.click(function(){side.click()});

function show(){
    header.animate({ 
        left: "0px",
        boxShadow: "3px 1px 11px -3px rgba(0,0,0,.45)"
    }, { 
        duration: 700, 
        queue: false 
    });

    sideHandler.animate({ 
        left: "200px",
    }, { 
        duration: 700, 
        queue: false 
    });
    overlay.show();
    side.text('<'); 
}

function hide(){
    header.animate({ 
        left: "-200px",
        boxShadow: "0px 0px 0px 0px rgba(0,0,0,0)"
    }, { 
        duration: 700, 
        queue: false 
    });

    sideHandler.animate({ 
        left: "0px",
    }, { 
        duration: 700, 
        queue: false 
    });
    overlay.hide();
    side.text('>'); 
}
​
于 2012-11-04T23:28:36.650 に答える
0

関数内slide-overlay .click()：

$('#side-overlay').click(function() {
    //...
    $("a#side-toggle").text($(this).text() == '>' ? '<' : '>');});​
});

$(this)実際にはを参照して$('#side-overlay')いるので、ターゲットが間違っているため、矢印は変わりません。$(this)削除して適切なターゲットと交換する必要があります...

$("a#side-toggle").text($("a#side-toggle").text() == '>' ? '<' : '>');});​

ここで動作することを確認してください：http： //jsfiddle.net/4HXEm/4/

于 2012-11-04T23:28:01.960 に答える