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逻辑包装在条件中，或者您可以将每个操作分配给触摸和单击。

* 除了带有鼠标的手机和平板电脑（非常不典型的用例）。

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

1 个答案: