Ol在没有进入if条件的情况下隐藏

ol is hiding without entering the if condition

本文关键字：条件 情况下 隐藏 if Ol      更新时间：2023-09-26

我有这个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 && jQuery(e.target).closest('ol.main-nav > li').length) {
          e.preventDefault();
    } else {
          jQuery('ol.main-nav').hide(100);
    }
});

演示:https://jsfiddle.net/Lm73y2bL/

相关文章：