基金会5下拉菜单 - 点击链接点击并悬停

时间:2014-09-17 09:10:19

标签: javascript jquery html zurb-foundation

我正在使用基础5并实施了一个侧栏"飞出"使用Dropdowns feature的类别/子类别菜单。

这一切都按预期工作但是我需要顶级类别链接点击以及悬停以显示子类别。有谁知道我会怎么做到这一点?

<ul class="side-nav nav-bar vertical">  
<li>
<a id="showDropdown" href="http://www.google.com" data-options="is_hover:true;align:right;" data-dropdown="drop_[CategoryID]" >[CategoryName]</a>
<ul id="drop_[CategoryID]" class="small f-dropdown" data-dropdown-content>
<li> <a href="http://www.google.com">[CategoryName]</a></li>
</ul>
</li>
</ul>

我认为下拉功能与顶栏的工作方式相同,这似乎也不支持具有点击和悬停的顶级链接。有谁知道为什么这是因为这是非常标准的不是吗?

非常感谢

1 个答案:

答案 0 :(得分:4)

我相信这个想法是,在移动设备上,如果你点击一个下拉菜单,那么真的非常烦人,那么在你选择一个子选项之前,页面会在其他地方出现错误,所以它更容易不听取父链接上的点击。

如果您想重新添加功能,可以执行一些简单的操作,例如this fiddle *:

<a data-follow-click id="showDropdown" href="http://www.google.com" data-options="is_hover:true;align:right;" data-dropdown="drop_7">[CategoryName]</a>

$(function() {
    $('[data-follow-click]').on('click', function() {
        location.href = this.href;
    });
});

显然,这是一个非常粗略的示例,并且不会触发任何更复杂的处理程序,它只是让href通过,但这适用于OP示例。

*注意:小提琴不跟随谷歌的链接 - 检查控制台以查看请求何时或不通过: - )