0

メニュー リストを表示するためにコンテンツを片側に移動するプッシュ スタイル メニューを作成しようとしています。これまでのところ、メニューは開閉時に正常に機能しますが、ユーザーがコンテンツ セクションの任意の場所をクリックしてメニューを閉じることができる機能も追加したいと考えています。

メニューが開いたら、「閉じる」機能を本体コンテナに結び付ける方法がよくわかりません。

.bind() と .trigger() を使用しようとしましたが、javascript/jquery が初めてで、この状況で機能させる方法がよくわかりません。

メニューを開閉する現在の関数は次のとおりです...

$('.menu-button').click(function(){

    if(parseInt($('.site-menu').css('left')) == -144){
        $('.site-menu').addClass('site-menu-pushr');
        $('.site-header, .container-site-content').addClass('site-view-pushr');
    }
    else {
        linkClickUnpush();
    }

});

クラスを使用してアニメーションを実行するので、メニューが開いたらコンテンツをクリックできる機能を作成できると考えましたが、サイコロはありません! 上記のクリックイベントに追加するとメニューが壊れてしまうため、メニューが開かれるたびに関数を実行する方法がわかりません。

function contentCloseMenu(){

    if($('.site-header, .container-site-content').hasClass('site-menu-pushr')){
        $('.site-header, .container-site-content').click(function(){
            linkClickUnpush();
        });
    }
};

どんな助けでも大歓迎です！

4

1 に答える 1

0

ここを見てください：http://jsfiddle.net/Vafw5/1/

コード

$(document).ready(function () {
    $("#menu").on("click", function (e) {
         e.stopPropagation();
        if ($(this).hasClass("opened")) {
            $(this).animate({left: "0px"}, 600);
            $(this).removeClass("opened");
        } else {
            $(this).animate({left: "150px"}, 600);
            $(this).addClass("opened");
        }
      });
    $("#container").on("click", function(){
        if($("#menu").hasClass("opened")){
            $("#menu").animate({left: "0px"}, 600);
            $("#menu").removeClass("opened");
        }
    });
});

赤い四角をクリックしてメニューを開き、もう一度赤い四角または黄色のボックス内をクリックしてメニューを閉じます。

それが役に立てば幸い

于 2013-06-16T21:54:54.777 に答える