Twitter引導：下拉菜單懸停桌面，單擊平板電腦/電話？

似乎有很多關於如何更改Twitter Bootstrap的下拉菜單的問題/答案出現在點擊上出現在懸停上。 Bootstrap的製造商有一個很好的理由使用點擊而不是懸停 - 懸停不適用於大多數平板電腦&手機。然而，我使用Bootstrap的原因之一是它的響應特性。我想要一個可以在臺式機，平板電腦和手機上查看的網站。雖然單擊以獲取下拉列表對於平板電腦和手機來說是必需的，但這不是桌面的預期行爲。我希望我的網站能夠快速響應，但不會犧牲對用戶的再培訓。Twitter引導：下拉菜單懸停桌面，單擊平板電腦/電話？

有沒有辦法爲桌面設備提供懸停下拉列表，併爲平板電腦和手機點擊下拉列表？

來源

2012-06-18 Tonya Abna

你可以用「響應實用工具類」

http://twitter.github.com/bootstrap/scaffolding.html頁面

來源

2012-06-18 22:42:35 baptme

實際上，通過使用響應實用工具類，似乎我就必須有我的菜單有兩個獨立版本。一個會顯示給手機/平板電腦，一個會顯示桌面。理想情況下，我只需要一個菜單。 –

@TonyaAbna你可以做到這一點http://jsfiddle.net/baptme/gRVUq/1/，但你需要一些jQuery來關閉第二次點擊下拉。 – baptme

baptme，我不確定我是否理解你的答案。我看到你是如何讓鼠標懸停而不是點擊的，但我正在尋找一種解決方案，可以在桌面上進行懸停並單擊手機/平板電腦。我在演示中遺漏了什麼？空點擊功能是做什麼的？ –

我創建了一個插件的底部（一對夫婦的改進工作，但它絕對可以作爲是），使下拉菜單的工作懸停時，但它不會干擾Twitter Bootstrap的單擊事件，因此您可以安全地綁定兩者，這意味着如果有鼠標，它將在懸停時激活，但如果沒有鼠標（即平板電腦上的觸摸屏），點擊時仍會激活。

我必須託管在GitHub上的插件：https://github.com/CWSpear/twitter-bootstrap-hover-dropdown

它可以通過顯式調用它，但我會調整代碼，在不久的將來，數據屬性的工作。

來源

2012-10-17 15:22:27 CWSpear

CWSpear：你的插件工作非常好，而且安裝/使用起來非常方便。真的很感謝你分享它。謝謝！〜蘇珊 – susan

這很酷..和容易@CWSpear –

我正在爲此尋找。我找到了更好的解決方案（我認爲）。我們可以很容易地使用真棒Modernizr.js庫來做到這一點。我們可以通過以下功能檢測觸摸屏設備。

function is_touch_device() { 
    return !!('ontouchstart' in window); 
}

，然後我們可以動態地通過JavaScript或者通過改變位置「＃」或通過防止父菜單項的默認操作禁用超鏈接的URL。最終的代碼如下。

有關詳細信息，你可以看到this link 我相信有人會投我:-)

感謝

來源

2015-08-13 17:46:29

你的解決方案似乎沒有太多與Modernizr.js圖書館...似乎它會幾乎逐字地與jQuery工作。（編輯：庫名中的錯字） –

Twitter引導：下拉菜單懸停桌面，單擊平板電腦/電話？

回答

相關問題