html - 如何制作可点击的父链接 Accordion 菜单

Question

如何在移动设备上制作可点击的父下拉菜单( Accordion 菜单)链接。当我单击到父链接时，只有向下钻取或 Accordion 菜单切换，但 lparent 链接不可单击。我使用 foundation zurb 6。

<ul data-accordion-menu class="vertical menu">
      <li><a href="parent.html">should be clickable on mobile</a>
        <ul class="menu vertical">
          <li><a href="#">link 1</a></li>
          <li><a href="#">link 2</a></li>
        </ul>
      </li>
</ul>

Answer 1

我不确定你为什么要这样做，但你可以使用一些 JavaScript 来实现这个目标。

$(document).on('click', '.is-accordion-submenu-parent', function (e) {
    if (Foundation.MediaQuery.is('small only')) {
        var $submenu = $(this).children('[data-submenu]');
        if ($submenu.length) {
            $submenu.remove();
            location.href = e.target.getAttribute('href');
        }
    }
});

由于这一行，此代码将仅在小屏幕尺寸时触发:

if (Foundation.MediaQuery.is('small only'))

它将从 DOM 中删除子菜单(您不需要它，因为您被重定向到另一个页面)并将您重定向到位于父级 href 属性中的页面。