0

我正在尝试将单击和悬停功能添加到菜单中。我现有的在点击时激活下拉菜单的 Javascript 是：

<script type="text/javascript">
    $(document).ready(function () {
        $('#nav > li > a').click(function(){
            if ($(this).attr('class') != 'active'){
                $('#nav li ul').slideUp();
                $(this).next().slideToggle();
                $('#nav li a').removeClass('active');
                $(this).addClass('active');
            }
        });
    });
</script>

我尝试使用 jquery 通过放入页面头部来添加同时悬停触发：

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>$("#nav").bind("click hover", fn);</script>

除其他外，可以预见的是，它们都不起作用。我显然不知道我在做什么！没有添加 jquery 的工作页面在这里，菜单位于页面的左侧。如果有人能给我建议，将不胜感激！

4

3 回答 3

0

尝试更新到最新的 Jquery，然后阅读：

.on( events [, selector] [, data], handler(eventObject) )

events：一种或多种以空格分隔的事件类型和可选的命名空间，例如“click”或“keydown.myPlugin”。

所以基本上我认为你可以交换.click和.on使用事件click mouseover。

编辑

在您的源页面中，Jquery 版本是1.4.2，只是为了注意。

于 2012-09-04T00:53:20.350 回答
0

您可以使用预构建的解决方案，而不是从头开始创建自己的解决方案。

参见 Superfish - http://users.tpg.com.au/j_birch/plugins/superfish/。

Superfish 是一个处理点击/悬停下拉菜单的 jQuery 插件。

对于仅 css 的下拉菜单，搜索“Suckerfish”。Superfish 可以在 Suckerfish 之上使用，以在用户没有启用 javascript 的情况下进行优雅的降级。

于 2012-09-04T00:30:58.860 回答
0

我发现这最适合我的需求：

`<script type="text/javascript">
$(function(){
$('#nav > li > ul')
.hide()
.click(function(e){
e.stopPropagation();
});

$('#nav > li').toggle(function(){
$(this)
.removeClass('waiting')
.find('ul').slideDown();
}, function(){
$(this)
.removeClass('waiting')
.find('ul').slideUp();
});

$('#nav > li').hover(function(){
$(this).addClass('waiting');
 setTimeout(function(){
$('#nav .waiting')
.click()
.removeClass('waiting');
},600);
}, function(){
$('#nav .waiting').removeClass('waiting');
});
});
</script>`

@Niloct 帮助我找到了一种方法来关闭先前触发的菜单项的子菜单，但这导致菜单有点不切实际。谢谢！

于 2012-09-07T07:41:58.883 回答