Binding события щелчка (B) после начального события щелчка (A) вызывает событие В огне сразу

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'); 
    } 
}; 

Я чувствую, что перо описывает это лучше, чем я могу. Я хочу щелкнуть значок nav, чтобы открыть навигацию, после чего все клики после этого закроют навигацию. Тем не менее, событие закрытия запускается сразу после первого щелчка, в результате чего открытие и закрытие навигатора происходит мгновенно. Я не знаю, как сделать это последовательным.

Answer 1

Вы должны

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

Поскольку первый щелчок бурлит в DOM весь путь к документу, в котором запускается этот обработчик событий.

Answer 2

Обновлены JS file..Use этот код

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);