Twitter Bootstrap Broken Dropdown

-1

我有一個網站運行bootstrap很長一段時間了（自2.2 ish）。我注意到下拉欄不再起作用後，我最近一直試圖修補頁面。這很奇怪，因爲它已經過測試，大約一年前沒有問題出現。Twitter Bootstrap Broken Dropdown

我試着用過去幾小時的一些較新的bootstrap例子替換HTML的部分內容，但是我看起來似乎無法讓下拉菜單繼續工作。

對於調試，我已經將問題隔離到最簡單的情況下，使用下面的HTML。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 

    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> 

    </head> 

    <body> 


    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="navbar-inner"> 
     <div class="container"> 
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </a> 
      <div class="brand">Test</div> 
      <div class="nav-collapse collapse"> 
      <ul class="nav"> 
       <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li class="divider"></li> 
        <li class="dropdown-header">Nav header</li> 
        <li><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
       </ul> 
       </li> 


      </ul> 
      </div><!--/.nav-collapse --> 
     </div> 
     </div> 
    </div> 



    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script> 
    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script> 


    </body> 
</html>

任何關於我可能會丟失的想法將非常感激。我相信這可能是導致此問題的Bootstrap版本之間不匹配。然而，我試圖重構HTML儘可能讓下拉工作，因爲我不再熟悉這個舊的代碼。

最終，我試圖解決這個錯誤，而無需從2.2.2遷移。

來源

2014-02-17 user1431282

我不確定它在JavaScript文件中的位置，但您需要給li一個「打開」類。當li有類「打開」，那麼它會顯示下拉菜單。所以ü可能要添加腳本是這樣的：

$('.dropdown a').on('click', function() { 
    $(this).closest('li').toggleClass('open'); 
});

或者你可以改變click成hover。你的選擇。

UPDATE

$('html').on('click', function() { 
    $('.dropdown.open').removeClass('open'); 
}); 
$('.dropdown a').on('click', function (e) { 
    e.stopPropagation(); 
    $(this).closest('li').addClass('open'); 
});

來源

2014-02-17 02:10:34 Chanckjh

謝謝:)，這將解決這個問題。但是，我的JS很生鏽。我將如何修改代碼，以便點擊屏幕上的任何位置後下拉消失，而不僅僅是按鈕。 – user1431282

現在您可以在點擊之外關閉它。並將答案標記爲正確 – Chanckjh

Twitter Bootstrap Broken Dropdown

回答

相關問題