如何实现metisMenu父级菜单链接可点击并区分展开操作

我懂你的需求——默认情况下metisMenu会把带子菜单的父级<a>标签整体设为展开触发器，导致链接无法正常跳转。要实现点击文字跳转页面、点击箭头展开子菜单的效果，我们可以通过调整HTML结构+自定义事件来解决，具体步骤如下：

1. 调整HTML结构 #

把原来嵌套在<a>标签内的箭头<span>移到<li>中，和<a>标签同级，让两者的点击行为可以独立处理：

<ul class="metismenu" id="menu">
  <li><a href="index.html">HOME</a></li>
  <li><a href="">ABOUT US</a></li>
  <li>
    <a href="https://google.com">CATEGORY</a>
    <span class="fa arrow"></span> <!-- 将箭头从a标签内移出 -->
    <ul class="nav nav-second-level">
      <li><a href="#">Politics </a></li>
      <li><a href="#">Feature </a></li>
      <li><a href="#">Entertainment </a></li>
      <li><a href="#">Business </a></li>
      <li><a href="#">Region</a></li>
      <li><a href="#">Media</a></li>
    </ul>
  </li>
  <li><a href="">Contact US</a></li>
  <li><a href="">Menu something</a></li>
</ul>

2. 调整CSS保证样式对齐 #

添加少量CSS，让箭头和链接保持原来的排版样式：

.metismenu > li {
  position: relative;
}
.metismenu > li .arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

3. 绑定自定义点击事件 #

初始化metisMenu之后，给箭头元素单独绑定点击事件，手动触发子菜单的展开/折叠逻辑：

// 先正常初始化metisMenu
$("#menu").metisMenu();

// 给箭头绑定点击事件，控制子菜单展开/折叠
$(".metismenu > li .arrow").on("click", function(e) {
  e.preventDefault();
  const parentLi = $(this).closest("li");
  // 切换metisMenu的激活类，同步菜单状态
  parentLi.toggleClass("mm-active");
  parentLi.find(".nav-second-level").toggleClass("mm-show");
});

原理说明 #

原来的结构中，箭头和链接同属一个<a>标签，metisMenu会监听这个<a>的点击事件并阻止默认跳转，用来触发子菜单展开。通过把箭头分离出来，我们让<a>标签恢复了正常的跳转功能，同时给箭头单独绑定展开逻辑，完美实现你要的分离效果。

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