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 回答