Блог

У меня есть это 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, но все равно каким-то образом выполняет фрагмент кода.

Попробуйте этот способ:

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

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

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

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

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

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

демонстрация: https://jsfiddle.net/Lm73y2bL/