Question

我将ol与li放进去了。点击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

您几乎从不想在另一个事件处理程序中挂起事件处理程序。

您所描述的内容有两种选择：

检查事件发生的时间，看它是否通过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);
    }
});

或

向阻止传播的li添加处理程序。它更简单：

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

ol没有进入if条件就隐藏了

3 个答案: