Question

http://codepen.io/oliecs/pen/womLPJ

var nav = {

    init: function () {
        console.log('nav init');

        $nav = $('nav');
        $navIcon = $('.nav-icon');

        $navIcon.on('click',function(){
            nav.show();
        })
    },

    show: function () {
        console.log('nav show');

        $nav.addClass('active');
        $_DOCUMENT.on('click.navisopen',function(){ //document is a global variable
            nav.close();
        })
    },

    close: function () {
        console.log('nav close');

        $nav.removeClass('active');
        $_DOCUMENT.off('.navisopen');
    }
};

我觉得笔比我更好地描述了这一点。我想单击导航图标以打开导航，然后在此之后的任何单击将关闭导航。但是，在第一次点击后立即触发关闭事件，导致导航立即打开和关闭。我不知道怎么做这个顺序。

Answer 1

更新了js文件..使用此代码

    var ecs= {};
    ecs.common = (function($) {
    var $_DOCUMENT = $(document),
    $_WINDOW = $(window),
    $nav = $('nav'),
    $navIcon = $('.nav-icon');
    var nav = {
        init: function () {
            console.log('nav init');
            $nav = $('nav');
            $navIcon = $('.nav-icon');
            $navIcon.on('click',function(){
                nav.show();
            })
        },
        show: function () {
            console.log('nav show');
            $nav.addClass('active');
            // $_DOCUMENT.on('click.navisopen',function(){
            //     nav.close();
            // })
        },
        close: function () {
            console.log('nav close');
            $nav.removeClass('active');
            $_DOCUMENT.off('.navisopen');
        }
    };
    //--------------------
    //  DOM Ready
    //--------------------
    $(function() {
        nav.init();
    });

    $(document).mouseup(function (e) {
        var container = $(".nav-icon");
        if (!container.is(e.target) && container.has(e.target).length === 0) {
            /* if the target of the click isn't the container && nor a descendant of the container */
            $nav.removeClass('active');
        }
    });
})(jQuery);

Answer 2

你需要

    $navIcon.on('click',function(event){
        event.stopPropagation();
        nav.show();
    })

因为第一次点击是将DOM一直冒泡到触发该事件处理程序的文档。

在初始点击事件（A）之后绑定点击事件（B）会导致事件B立即触发

2 个答案: