使用Jquery创建一个具有单击和悬停功能的菜单

Create a menu with click and hover functionalty using Jquery

本文关键字：单击 悬停 功能 菜单 一个 创建 Jquery 使用      更新时间：2023-09-26

我正在尝试将单击和悬停功能添加到菜单中。我现有的在点击时激活菜单下拉菜单的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的工作页面在这里，菜单在页面的左手边。如果有人能给我建议，我将不胜感激！

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

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

events：一个或多个空格分隔的事件类型和可选命名空间，如"点击"或"keydown.myPlugin"。

因此，基本上我认为您可以将.click交换为.on，并使用事件click mouseover。

编辑

在您的源页面中，Jquery版本是1.4.2，仅供注意。

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

请参阅超级鱼-http://users.tpg.com.au/j_birch/plugins/superfish/.

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

对于仅css的下拉菜单，请搜索"Suckerfish"。Superfish可以在suckerfish之上使用，以在用户没有启用javascript的情况下实现优雅的降级。

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

`<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帮助我找到了一种方法来关闭之前触发的菜单项的子菜单，但这导致菜单有点不切实际。谢谢

相关文章：