適用於移動設備的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的移動友好測試，並且沒有任何問題！