如何使用Foundaton 6更改小屏幕上顶级链接的功能

如果您希望（例如）Item 2在单击时充当<a href="go_here">链接（而不是显示Item 2A和Item 2B的触发器）；我不认为在基金会有一个标准的方法来做到这一点。然而，你可以通过隐藏在更大屏幕或JavaScript/jQuery+CSS+HTML更改中的附加链接来绕过它：

附加链接

这个选项不需要添加破解或额外的CSS来隐藏不需要的菜单家具或覆盖基础菜单的工作方式。这样做的目的是添加一个只在小屏幕上可见的新链接，同时保持原始链接不变，以继续充当触发器。

<li><a href="http://foundation.zurb.com/">Item 2</a>
    <ul>
         <li class="show-for-small-only">
             <a href="http://foundation.zurb.com/">Item 2 "home"</a>
         </li>
         <li><a href="http://foundation.zurb.com/">Item 2A</a></li>
         <li><a href="http://foundation.zurb.com/">Item 2B</a></li>
    </ul>
</li>

JSfiddle：https://jsfiddle.net/sons9wzr/2/

这更有用，但需要额外单击才能显示子菜单。也可以使用JavaScript/jQuery动态地执行此操作。

JavaScript/jQuery+CSS+HTML

如果目标是只为移动设备提供相关链接，并为桌面提供扩展菜单，则可以使用与上面第一个示例中类似的添加类来隐藏子导航，添加JavaScript，然后使用CSS隐藏多余的插入符号。

所以你的HTML变成了这样：

<li><a class="forced" href="http://foundation.zurb.com/">Item 2</a>
    <ul class="show-for-large-only">
         <li><a href="http://foundation.zurb.com/">Item 2A</a></li>
         <li><a href="http://foundation.zurb.com/">Item 2B</a></li>
    </ul>
</li>

然后使用JavaScript（jQuery是Foundation所必需的）强制点击某些导航项（通过将class="forced"添加到每个<a>中，您希望强制转到上面HTML中的新位置）。

仅适用于小屏幕的JavaScript示例：

//check for screen size = small
if(Foundation.utils.is_small_only()) {
    $('nav').on('click','a.forced', function (e) {
        e.preventDefault;
        window.location.href = $(this).attr('href');
    });
}

（有关媒体查询JS实用程序的更多信息）

这仍然会在菜单项上留下插入符号，尽管这可能会让用户感到困惑，所以你可以用这个删除它（从所有子导航项中）：

.is-accordion-submenu-parent > a::after {
    display: none;
}

这应该会给您带来所需的效果，尽管在更新Foundation时可能需要额外的维护。

Codepen中的示例（不带代码，仅适用于小屏幕）：http://codepen.io/tymothytym/pen/eZGEER

编辑：好的，基于这个评论：

我希望能够通过单击父元素右侧的图标来展开移动视图中的菜单，也希望能够单击父元素本身。

我创建了一个新的解决方案。这在很大程度上是一个破解，而不是一个很好的解决方案。我建议要么找到一个替代导航设置，要么在Foundation提供的框架内工作。

新建HTML（forced类移动到<li>并添加<span>）

<li class="forced">
    <span data-item="Item 2" class="show-for-small-only"></span>
    <a href="http://foundation.zurb.com/">Item 2</a>
    <ul class="menu vertical">
        <li><a href="http://foundation.zurb.com/">Item 2A</a></li>
        <li><a href="http://foundation.zurb.com/">Item 2B</a></li>
    </ul>
</li>

新建CSS这将分割<li>的内容并定位新的子元素

.is-accordion-submenu-parent > a::after {
    display: none;
}
@media only screen and (max-width: 40em) {
  li.forced span {
    content: 'Item 2';
    display: inline-block;
    padding: .7rem 1rem;
    line-height: 1;
    width: 70%;
    color: #2199e8;
    cursor: pointer;
  }
  .menu > li.forced > a {
      padding: .7rem 1rem;
      line-height: 1;
      float: right;
  }
}

新JavaScript

这会更改链接的文本（您只需要在上面显示的小屏幕上这样做…），使新的<span>成为链接，通过数据属性插入文本&将原始链接文本更改为插入符号（以保留尽可能多的原始功能）。

$(document).foundation();
$('nav').on('click','.forced span', function () {
  window.location.href = $(this).siblings('a').attr('href');
});
$('.forced > a').html("▼");
$('.forced > span').text($('.forced > span').data("item"));

此处的示例：http://codepen.io/tymothytym/pen/GZOqvO

我认为这可能有可用性和维护问题，所以要谨慎使用。