适用于移动设备的CSS下拉导航

Question

我可能会在这里引起专业人士的愤怒。 我是一个业余爱好者，试图在工作中“边走边学”，但是大多数javascript仍然让我感到困惑。 （我在HTML和CSS方面相当出色。）

我正在为公司的网站开发一个新的下拉导航（是的，终于在我的头上了），但是我似乎无法弄清楚它是否适合移动设备。 我已经搜索并搜索了该站点以及其他站点，但是我的无知也许使我无法理解所提供的一些可能的解决方案。 （因此，对患者的基本解释将不胜感激。）

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

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

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

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'，...

我可以考虑几种方法来做到这一点。 一种是跟踪您单击的项目，以便第一次单击该项目时会记住“ this”，当再次单击该项目时，我们将比较这些项目，如果匹配则触发事件：

var clickedItem = '';

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

至于单击未单击时关闭下拉菜单，请签出jQuery focusout，并将其设置为所有下拉菜单的常规选择器。

Answer 2

冒着被专业开发人员大怒的风险，我决定发布我的解决方案，例如它，以防万一它可以帮助像我这样懒惰的其他人。

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

问题是，在我以前没有移动设备的旧网站上，下拉菜单在手机，iPhone，平板电脑等设备上都可以正常工作，但是在将其重新开发为移动设备友好型产品（感谢Google！）后，它突然没有了！？ 在花了几个小时查找代码原因之后，我意识到，旧站点和新站点之间的唯一区别（除了像素宽度已更改为％宽度）是新站点具有此新的和所有重要的元标记：

<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和平板电脑执行他们已经能够执行的操作的麻烦在做。

我已经在我的Sony Z1上对其进行了测试，并且还通过了Google的移动友好测试，并且没有任何问题！