Question

我可能会在这里引起专业人士的愤怒。我是一名业余爱好者，正在努力学习“随时随地学习”。在工作中，但大多数JavaScript仍然让我感到困惑。（我在HTML和CSS方面相当不错。）

我正在为我公司的网站开发一个新的下拉导航（是的，终于在我脑海中），但我似乎无法让它变得适合移动设备。我搜索和搜索过这个网站以及其他网站，但是我的无知可能使我无法理解所提供的一些可能的解决方案。（因此，患者会高度赞赏基本的解释。）

我只需要两件事就可以让我的导航菜单适合移动设备：

我需要下拉菜单来响应点击/触摸，而不是悬停。因为我的下拉列表的所有级别都包含链接，所以我希望用户在进入链接之前必须单击/触摸每个按钮两次。第一次点击/触摸将只打开我分配给标签的操作。（示例：首先单击/触摸型号将显示模型的附加缩略图 - 我已经知道如何执行此操作。）
我需要通过单击/触摸＆＃34;关闭窗口＆＃34;关闭才能关闭。按钮或单击/触摸页面上的负空格。目前，只刷新页面或点击/触摸另一个活动链接才能使用户前进。

为了记录，我只是尝试调整下一页显示的下拉菜单以供我们公司使用，但它是悬停而不是点击/触摸激活：

http://code.tutsplus.com/tutorials/how-to-build-a-kick-butt-css3-mega-drop-down-menu--net-15129

请帮忙。原谅我的无知，我正在努力。仁慈的人有福了。

提前致谢。

Answer 1

我认为jQuery在这里是你的朋友，特别是.on（'click'，...和.on（'dblclick'，...

我可以通过几种方式来做到这一点。一个是跟踪你点击的项目，以便第一次点击一个项目时“记住”，再次点击该项目时，我们会比较这些项目，如果它们匹配，则触发事件：

var clickedItem = '';

$(document).on('click', '#dropdown1', function() {
  if (clickedItem == '' || clickedItem != this) {
    clickedIten = this;
    Do other stuff..
  }
  else if (clickedItem == this) {
    Open Dropdown...
  }
});

关于点击任何内容时关闭下拉列表，请检查jQuery焦点并将其设置为所有下拉列表的常规选择器。

Answer 2

冒着在这里处理专业开发人员的愤怒的风险，我已经决定发布我的解决方案，例如它，只是为了帮助其他像我一样懒惰的人。

我也是业余爱好者，和许多其他人一样，在移动友好时遇到了纯手机和平板电脑上的纯html / css下拉菜单问题。

问题是，在我的旧的，没有移动设备友好的网站上，下拉菜单在手机，iPhone，平板电脑等上工作得很好但是在重新开发它以便移动友好之后（感谢Google！）它突然没有了。牛逼！？在花了几个小时浏览我的代码以找出原因之后，我意识到旧网站和新网站之间的唯一区别是，除了像素宽度被改为％宽度之外，新网站有这个新的和所有重要的元标记： / p>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我知道这段代码需要在那里，但现在我也知道它引起了我的所有问题......好吧，无论如何，我所有的网站都有相关的问题。

我提出了这个懒惰和厚颜无耻的解决方案，让我的下拉菜单在移动友好之前就像它一样工作。

只需将初始比例更改为低于1.0的标称数量，并添加一些代码以获得良好的衡量标准，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=0.994, user-scalable=yes">

我不确定为什么会这样，但我只能假设将初始比例设置为1.0，即屏幕的整个宽度，禁用这些设备内置的双击功能。

在下方设置它，打开门就足以让他们自己的双击功能再次工作，省去了放入一大堆复杂代码的麻烦，只是为了让手机，iPhone和平板电脑做他们做的事情。 ;已经能够做到了。

我在索尼Z1上测试了这个，并通过Googles移动友好测试，并没有问题！

适合移动设备的CSS下拉导航

2 个答案: