JQuery 点击事件不适用于带有 # 的链接 - 需要在移动设备上显示/隐藏子菜单

Question

我有一个左侧菜单，悬停时有一个弹出子菜单。在平板电脑/手机上，我的菜单通过切换按钮折叠。这一切都很好。

问题是单击事件不适用于具有子菜单的菜单项。我需要在移动设备上单击时显示/隐藏子菜单。因此，当单击第 1 项时没有任何反应，但第 2 项有效且子菜单链接有效。难道是带链接的可以用而带#的不行吗？

   $(function() {
//behaviours depending on screensize
function checkScreenSize() {
  var width = $(window).width();

  /*MOBILE*/
  if (width < 991.98) {
    $('#primary-menu li').click(function() {
      console.log('test 1');
      $(this).children('.sub-menu').slideToggle();
    });
    //does not work

    $('#primary-menu > li').on('click', function() {
      console.log('test 2');
      $(this).children('.sub-menu').slideToggle();
    });
    //does not work

    //show submenu 
    $('#primary-menu  li').on('click', function() {
      console.log('test 3');
      var submenu = $(this).children('.sub-menu');
      $(submenu).show();

    });
    //does not work

    $('#primary-menu li > .sub-menu').parent().click(function() {
      console.log('test 4');
      var submenu = $(this).children('.sub-menu');
      var current = $(this).hasClass("current-menu-item");
      $(submenu).show();

    });
    //this works

  } else {
    /*DESKTOP*/
    // ....this all works....
  }


  checkScreenSize();
  $(window).resize(checkScreenSize);
});

.sub-menu {display:none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="primary-menu" class="menu nav-menu">
  <li id="menu-item-4793" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4793">
    <a href="#" class="menu-image-title-after menu-image-not-hovered"><img width="1" height="1" src="/wp-content/uploads/2021/12/copie.svg" class="menu-image menu-image-title-after" alt="" loading="lazy"><span class="menu-image-title-after menu-image-title">Item 1</span></a>
    <ul class="sub-menu" style="display: table;">
      <li id="menu-item-4908" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4908">
        <a href="/subitem1/">SUBItem1</a>
      </li>
      <li id="menu-item-4892" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4892">
        <a href="/subitem2/">SUBItem2</a>
      </li>
    </ul>
  </li>
  <li id="menu-item-4794" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-4794">
    <a href="/item2/" aria-current="page" class="menu-image-title-after menu-image-not-hovered">
      <img width="1" height="1" src="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2021/12/Plan-de-travail-1.svg" class="menu-image menu-image-title-after" alt="" loading="lazy">
      <span class="menu-image-title-after menu-image-title">Item 2</span>
    </a>
  </li>
</ul>

Answer 1

考虑以下。

$(function() {
  function mobileInit() {
    $('li.menu-item').off("click").click(function(e) {
      if ($(this).parent("ul").is("#primary-menu")) {
        e.preventDefault();
        console.log("Click Event on Top Level");
        $(".sub-menu", this).toggle();
        return false;
      } else {
        console.log("Click Event on Sub Level");
        e.stopPropagation();
        return false;
      }
    });
  }

  function desktopInit() {}

  //behaviours depending on screensize
  function checkScreenSize() {
    if ($(window).width() < 991.98) {
      console.log("Mobile");
      mobileInit();
    } else {
      console.log("Desktop");
      desktopInit();
    }
  }

  checkScreenSize();
  $(window).resize(checkScreenSize);
});

.sub-menu {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="primary-menu" class="menu nav-menu">
  <li id="menu-item-4793" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4793">
    <a href="#" class="menu-image-title-after menu-image-not-hovered"><img width="1" height="1" src="/wp-content/uploads/2021/12/copie.svg" class="menu-image menu-image-title-after" alt="" loading="lazy"><span class="menu-image-title-after menu-image-title">Item 1</span></a>
    <ul class="sub-menu">
      <li id="menu-item-4908" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4908">
        <a href="/subitem1/">SUBItem1</a>
      </li>
      <li id="menu-item-4892" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4892">
        <a href="/subitem2/">SUBItem2</a>
      </li>
    </ul>
  </li>
  <li id="menu-item-4794" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-4794">
    <a href="/item2/" aria-current="page" class="menu-image-title-after menu-image-not-hovered">
      <img width="1" height="1" src="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2021/12/Plan-de-travail-1.svg" class="menu-image menu-image-title-after" alt="" loading="lazy">
      <span class="menu-image-title-after menu-image-title">Item 2</span>
    </a>
  </li>
</ul>

这假设用户将单击所有元素menu-item，并且我们希望根据它们在层次结构中的位置执行不同的操作。

Event 接口的stopPropagation ()方法可防止当前事件在捕获和冒泡阶段进一步传播。然而，它并不能阻止任何默认行为的发生；例如，仍然会处理链接的点击。如果您想停止这些行为，请参阅PreventDefault()方法。它也不会阻止立即传播到其他事件处理程序。如果您想停止这些，请参阅stopImmediatePropagation()。

更新

你有一种适合display: table你的风格。删除它允许 CSS 根据需要显示和隐藏它。切换到.toggle()将执行此操作。