javascript - 移动友好的 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 是您的 friend ，特别是 .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 并将其设置为所有下拉列表的通用选择器。