悬停时展开垂直下拉菜单，而不是单击

Expand vertical drop down menu on hover instead of click

本文关键字：单击 下拉菜单 垂直 悬停      更新时间：2023-09-26

我有一个可扩展的垂直下拉菜单，当前在单击一级项目时会展开，但我希望它在悬停菜单项时展开。原始脚本是：

<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>

我把.click(function改成了.hover(function，这很有效，但我不知道这是否是最好的方法。有人能告诉我是否有更好的方法来实现这一点吗？单击此处，您可以在页面左侧看到.click版本菜单的工作示例。谢谢

将其更改为悬停是可以接受的。它绝对是可读性很强的代码，这是最重要的。然而，有一个问题——正如Daniel所评论的，这会使你的菜单无法在触摸设备上导航，这意味着你会使每个手机和平板电脑都无法访问该网站。这是一件非常糟糕的事情，但你可以做一些事情。

例如，jQTouch库有一些很棒的触摸特定事件处理，可以让你为移动用户优化菜单。否则，您可以将菜单的JavaScript逻辑封装在一个条件中，也可以将每个操作分配给触摸和单击。

*除了带鼠标的手机和平板电脑（这是一个非常非典型的用例。）

相关文章：