如何通过菜单a标签及.dropdown-btn触发下拉菜单展开

问题 #

当前移动端导航仅支持点击.dropdown-btn展开下拉菜单，需要实现点击li.menu-item-has-children下的<a>标签时，也能打开对应下拉菜单，修改代码后问题仍未解决，求简便修改方法。

原JS代码：

//Submenu Dropdown Toggle
if ($(".main-header li.menu-item-has-children ul").length) {
  $(".main-header .navigation li.menu-item-has-children > a").append(
    '<div class="dropdown-btn"><span class="fa fa-angle-right"></span></div>'
  );
}

//Mobile Nav Hide Show
if ($(".side-menu__block").length) {
  var mobileMenuContent = $(".main-header .nav-outer .main-menu").html();
  var mobileNavContainer = $(".mobile-nav__container");
  mobileNavContainer.append(mobileMenuContent);

  //Dropdown Button
  mobileNavContainer
    .find("li.menu-item-has-children .dropdown-btn")
    .on("click", function (e) {
      e.preventDefault();
      $(this).toggleClass("open");
      $(this).parent("a").parent("li").children("ul").slideToggle(500);
    });
  
    
  //Menu Toggle Btn
  $(".mobile-nav-toggler").on("click", function () {
    $(".side-menu__block").addClass("active");
  });

  $(".side-menu__block-overlay,.side-menu__toggler, .scrollToLink > a ").on(
    "click",
    function (e) {
      $(".side-menu__block").removeClass("active");
      e.preventDefault();
    }
  );
}

解决方案 #

调整下拉菜单的点击事件绑定范围，同时处理<a>标签的默认跳转行为即可，修改后的代码如下：

//Submenu Dropdown Toggle
if ($(".main-header li.menu-item-has-children ul").length) {
  $(".main-header .navigation li.menu-item-has-children > a").append(
    '<div class="dropdown-btn"><span class="fa fa-angle-right"></span></div>'
  );
}

//Mobile Nav Hide Show
if ($(".side-menu__block").length) {
  var mobileMenuContent = $(".main-header .nav-outer .main-menu").html();
  var mobileNavContainer = $(".mobile-nav__container");
  mobileNavContainer.append(mobileMenuContent);

  // 绑定a标签的点击事件，包含内部的dropdown-btn
  mobileNavContainer
    .find("li.menu-item-has-children > a")
    .on("click", function (e) {
      // 阻止a标签默认跳转（如果需要点击文字部分也跳转，可删除此行，保留下面的判断）
      e.preventDefault();
      // 切换dropdown-btn的状态类
      $(this).find(".dropdown-btn").toggleClass("open");
      // 展开/收起对应的下拉菜单
      $(this).parent("li").children("ul").slideToggle(500);
    });
  
  //Menu Toggle Btn
  $(".mobile-nav-toggler").on("click", function () {
    $(".side-menu__block").addClass("active");
  });

  $(".side-menu__block-overlay,.side-menu__toggler, .scrollToLink > a ").on(
    "click",
    function (e) {
      $(".side-menu__block").removeClass("active");
      e.preventDefault();
    }
  );
}

修改说明 #

• 将点击事件绑定到li.menu-item-has-children > a上，覆盖整个a标签区域的点击触发
• 统一通过$(this).find(".dropdown-btn")控制按钮的open类状态，同时操作父li下的下拉菜单展开/收起
• 如果需要保留a标签文字部分的跳转功能，可删除e.preventDefault()，并添加判断：仅当点击目标是.dropdown-btn时阻止跳转，代码调整为：

  if ($(e.target).hasClass("dropdown-btn") || $(e.target).closest(".dropdown-btn").length) {
    e.preventDefault();
  }
  

内容的提问来源于stack exchange，提问作者Bartosz Skoneczny