Zurb Foundation Off Canvas子菜单不适用于Angular

Question

我从基金会复制了以下内容以获得Off Canvas子菜单:

<li class="has-submenu">
   <a href="#">Foo</a>
   <ul class="left-submenu">
      <li class="back"><a href="#">Back</a></li>
      <li><label>Level 1</label></li>
      <li><a href="#">Link 1</a></li>
   </ul>
</li>

当我点击'Foo'时,子菜单没有出现,我转到我的主页.我相信,因为链接是#,这是Angular使用的.有没有办法改变基金会#在这种情况下的使用,以使子菜单工作？

Answer 1

我相信是因为链接是#，而这就是 Angular 使用的。

是的你是对的。解决此问题的第一种可能性是打开 html5 模式，但并不总是可行（例如，由于服务器的设置）。

另一个解决方案是保留href空白 - 如果您不需要锚点的哈希标签而只需要打开子菜单，则功能大致相同：

<li class="has-submenu">
   <a href="">Foo</a>
   <ul class="left-submenu">
      <li class="back"><a href="">Back</a></li>
      <li><label>Level 1</label></li>
      <li><a href="">Link 1</a></li>
   </ul>
</li>