如何在metisMenu中使父链接可点击答案

【问题标题】：How to make parent link clickable in metisMenu如何在metisMenu中使父链接可点击
【发布时间】：2018-05-10 11:10:36
【问题描述】：

我正在尝试更改 metisMenu 的默认行为，以便如果父菜单有链接，则如果用户单击该链接，它将打开该链接，否则如果用户单击 <，它将显示打开的子菜单。

metisMenu 对我来说很好用，但我注意到我也有与父菜单关联的链接，它应该是可点击的，默认情况下这是不可能的。

例如在这个例子中Category 菜单也有子菜单项。我想要做的是，如果用户点击Category 部分，那么它应该转到该页面链接，或者如果用户点击<，那么它应该显示菜单。

我寻找文档离子，但找不到太多关于此的内容。有没有办法可以在metisMenu https://github.com/onokumus/metisMenu

代码笔示例https://codepen.io/anon/pen/zjWodW

<ul class="metismenu" id="menu">
  <li><a href="index.html">HOME</a></li>
  <li><a href="">ABOUT US</a></li>
  <li><a href="htt://google.com">CATEGORY<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>
 <!-- /.nav-second-level -->
  </li>
  <li><a href="">Contact US</a></li>
  <li><a href="">Menu something</a></li>
</ul>

【问题讨论】：

标签： javascript html css metismenu

【解决方案1】：

快速而肮脏的解决方法是创建另一个 span 元素并将链接放置在其中。因此，您从 <li> 中隐藏了 <a href>，metisMenu 会将其视为下拉菜单。

<ul class="metismenu" id="menu">
<li><a href="index.html">HOME</a></li>
<li><a href="">ABOUT US</a></li>
<li><a href="">
  <span class="fa arrow"></span>
    </a>
  <span>
    <a href="http://google.com" target="_blank">CATEGORY</a>
  </span>
<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>
<!-- /.nav-second-level -->
</li>
  <li><a href="">Contact US</a></li>
  <li><a href="">Menu something</a></li>
</ul>

见codepen：https://codepen.io/anon/pen/PeRWXO

【讨论】：

是的，这可能是快捷插件在新版本中似乎不支持此功能，因为该插件的旧版本支持大多数用户不会做的双击。

【解决方案2】：

将<span></span> 包裹在您的父 A 标签周围（如推荐的 lovemyjob）确实有效。

我在最新版本上运行它，它解决了我的问题。确保其子项自动展开，以便它们始终显示，您将失去父 A 标记在将其包装在跨度中时提供的折叠功能。

【讨论】：