javascript - 我如何通过 jQuery 显示 foundation.css dropmenu

Question

我尝试用 foundation.css 写一个导航栏，但是当鼠标移动时子菜单不显示。

问题是，如何在this webpage中显示test的子菜单？ .

我尝试更改visibility、display、z-index、left，但没有任何反应。

Answer 1

foundation.css 好像不是标准的css库

只需添加以下js脚本即可。 Click here to see the magic

基本思路是改变.dropdown的clip来显示和隐藏它。

function drop_show(a) {
    var s = '#'+a + " ul.dropdown";
    $(s).css('clip', 'auto');
}

function drop_hide(a) {
    var s = '#'+a + " ul.dropdown";
    $(s).css('clip', 'rect(1px, 1px, 1px, 1px)')
}
var drop_a = $('.has-dropdown');
drop_a.each(function() {
    $(this).attr("onMouseOver", "drop_show('" + $(this).attr('id') + "');");
    $(this).attr("onMouseout", "drop_hide('" + $(this).attr('id') + "');");
})