javascript - 在悬停时展开垂直下拉菜单而不是单击

Question

我有一个可展开的垂直下拉菜单，当前在单击第一级元素时展开，但是我希望它在菜单项悬停时展开。原脚本为:

<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 版本的工作示例 by clicking here. 谢谢!

Answer 1

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

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

*带鼠标的手机和平板电脑除外(非常不典型的用例。)