Bootstrap nav-collapse隱藏在單頁面應用程序

我目前對於我的單頁應用程序使用2.x Bootstrap版本。Bootstrap nav-collapse隱藏在單頁面應用程序

在桌面上，它工作正常。

但是在我的ipad和手機上，它顯示了一個很好的導航按鈕。但是，當我點擊下拉菜單中顯示的項目時，它不會自動關閉。

因爲這是一個單頁的應用程序，我覺得很煩人再次點擊它隱藏以查看內容。

當li點擊nav-collapse元素時，我試過摺疊（'隱藏'），但它隱藏了下拉菜單中的其他li元素。

$（ 'NAV崩潰>禮 '）。點擊（函數（E）
$（本）.collapse（' 隱藏'）

什麼是隱藏點擊一個鏈接時，最好的辦法？

感謝。

來源

2012-08-31 cloudpre

嗨cloudpre，我遇到了這個問題，發現了一個很好的解決方案！見下文。 – NoizWaves

有一個在Twitter的引導的下拉插件中的錯誤（見Issue #4497）這是在2.1.0和不經意間塊的下拉菜單項的單擊事件介紹，這應該是固定在2.1.1 。

如果您使用的是CDN或根本就不想編輯/重新編譯引導-dropdown.js，你可以添加以下解決方法到您的網頁，引導後加載它：

$('body') 
    .off('click.dropdown touchstart.dropdown.data-api', '.dropdown') 
    .on('click.dropdown touchstart.dropdown.data-api' 
    , '.dropdown form' 
    , function (e) { e.stopPropagation() })

如果你是託管自己的代碼，很舒服建設bootstrap.min.js，那麼你可以進行以下修改到引導-dropdown.js上線145：

'.dropdown'

應改爲

'.dropdown form'

來源

2012-08-31 17:50:06 merv

我知道這個錯誤，因爲它也影響到我們。但是，我使用的是舊版本。問題是關於在單個頁面應用程序上檢查鏈接之後隱藏div的各種方法。 – cloudpre

我打的是同樣的問題爲好，並通過添加數據屬性（修改崩潰只開放.nav崩潰）的導航項目鏈接自己解決它。

請注意，鏈接上的數據目標是「.nav-collapse.in」，它只選擇擴展的導航，因此僅用作關閉。

例如：

<a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse"> 
    <!-- Collapse icon goes here --> 
</a> 

<div class="nav-collapse"> 
    <ul class="nav"> 
     <li> 
      <a href="#" data-toggle="collapse" data-target=".nav-collapse.in">Link</a> 
     </li> 
    </ul> 
</div>

這在引導2.2.1測試僅Mac OSX上鉻。雖然它是重複的而不是乾燥的，但它確實保留了對HTML的摺疊聲明。

來源

2012-11-05 07:53:35 NoizWaves

在Bootrap 3.3.4中，您可以將以下內容添加到錨標籤以自動關閉導航欄。

data-toggle =「collapse」data-target =「＃navbar」

來源

2015-04-02 04:55:50 user2502767

Bootstrap nav-collapse隱藏在單頁面應用程序

回答

相關問題