javascript - 如何在 metisMenu 中使父链接可点击

Question

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

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

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

我正在查找文档 ion，但找不到太多相关信息。有没有办法在 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>

Answer 1

快速而肮脏的修复是创建另一个 span 元素并在其中放置链接。因此你隐藏了<a href>来自 <li> 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>

参见代码笔:https://codepen.io/anon/pen/PeRWXO