Question

我正在尝试制作推送式菜单，将内容移到一侧以显示菜单列表。到目前为止，菜单在打开和关闭时工作正常，但我还想添加一些功能，允许用户通过单击内容部分中的任意位置来关闭菜单。

我不确定如何在打开菜单后将'close'功能绑定到body容器。

我尝试过使用.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();
        });
    }
};

非常感谢任何帮助！

Answer 1

看看这里：http://jsfiddle.net/Vafw5/1/

<强> CODE

$(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");
        }
    });
});

点击红色方块打开菜单，再次点击红色方块或黄色框中的任意位置以关闭菜单。

希望有所帮助

一旦动作发生，如何使功能可用 - jquery

1 个答案: