ol скрывается без ввода условия if

Question

У меня есть это ol с li s в него. По щелчку ol я хочу, чтобы ol был скрыт, но если нажать на li, он не должен скрываться. И это должно произойти, когда размер экрана ниже 768px. Ниже мой код

jQuery('ol.main-nav').click(function() { 
    if (jQuery(window).width() <= 768) { 
     jQuery('ol.main-nav > li ').click(function (event) { 
      event.stopPropagation(); 
     }) 
     jQuery('ol.main-nav').hide(100); 
    } 
}) 

На самом деле, мой код скрывается ol.nav-main. При использовании отладчика он не переходит в условие if, но все равно каким-то образом выполняет часть кода.

Answer 1

ли одно событие щелчка, испытание, если щелкнуть элемент представляет собой элемент списка или, если щелкнуть мышью элемент является дочерним элементом списка:

jQuery('ol.main-nav').click(function (e) { 
    if (jQuery(window).width() <= 768 && jQuery(e.target).closest('ol.main-nav > li').length) { 
      e.preventDefault(); 
    } else { 
      jQuery('ol.main-nav').hide(100); 
    } 
}); 

демо: https://jsfiddle.net/Lm73y2bL/

Answer 2

Попробуйте так:

jQuery('ol.main-nav').click(function() { 
     if (jQuery(window).width() <= 768) {   
     jQuery('ol.main-nav').hide(100); 
     } 
    }); 

    jQuery('ol.main-nav > li ').click(function (event) { 
     if (jQuery(window).width() <= 768) {  
     event.stopPropagation(); 
     } 
    }) 

Answer 3

Вы почти никогда не хотите подключать обработчик событий внутри другого обработчика событий.

У вас есть два варианта для того, что вы описываете:

1. Проверить, когда происходит событие, чтобы увидеть, если он путешествовал через li:

   jQuery('ol.main-nav').click(function(event) { 
       var t; 
       if (jQuery(window).width() <= 768) { 
        for (t = event.target; t != this; t = t.parentNode) { 
         if (t.tagName == "LI") { 
          return; // The click came through an LI 
         } 
        } 
        jQuery('ol.main-nav').hide(100); 
       } 
   }); 
   

   или

2. Добавить обработчик li s, который останавливает распространение. Это гораздо проще:

   jQuery('ol.main-nav').click(function() { 
       if (jQuery(window).width() <= 768) { 
        jQuery('ol.main-nav').hide(100); 
       } 
   }); 
   jQuery('ol.main-nav > li').click(function(event) { 
       event.stopPropagation(); // If you like check `width` here too 
   });