引導程序下拉菜單

我知道有很多類似exmaples的代碼/問題。我搜查了很多，試圖複製/粘貼很多代碼。沒有工作。所以很抱歉，如果重複或其他。引導程序下拉菜單

無論如何，我想添加一個引導下拉菜單到我的固定導航欄。我不希望下拉被激活onclick，所以我刪除了插入符號。

這裏是我的代碼我的（部分）：

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="http://getbootstrap.com/examples/navbar-fixed-top/#">SDK Tests Status</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <span class="glyphicon glyphicon-folder-open room-icn"></span> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Rooms</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> 


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

有人嗎？謝謝！

來源

2014-02-19 FunJoy

我不能讚揚這一點。瑞安奧爾森有一個教程here。將CSS添加到.css文件或頭部。在</body>之前將JavaScript添加到頁面的最底部。將HTML放在頁面的主體中。

CSS：

.navbar-nav .dropdown:hover > .dropdown-menu { 
    display: block; 
} 
.navbar-nav .dropdown:hover > a[data-toggle=dropdown] + .dropdown-menu { 
    display: none; 
} 
.navbar-nav .dropdown.open > a[data-toggle=dropdown] + .dropdown-menu { 
    display: block; 
}

的JavaScript：

<script type="text/javascript"> 
$(function() { 
    var $win = $(window); 
    $win.resize(function() { 
     if ($win.width() > 768) 
      $(".navbar-nav > .dropdown > a").attr("data-toggle", ""); 
     else 
      $(".navbar-nav > .dropdown > a").attr("data-toggle", "dropdown"); 
    }).resize(); 
    $(".dropdown-menu").find("input, button").each(function() { 
     $(this).click(function (e) { 
      e.stopPropagation(); 
     }); 
    }); 
}); 
</script>

HTML：

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="http://getbootstrap.com/examples/navbar-fixed-top/#">SDK Tests Status</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-folder-open room-icn"></span> Rooms</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>

整頁：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <meta charset="utf-8"> 
     <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
     <!--[if lt IE 9]> 
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> 
     <![endif]--> 
     <style type="text/css"> 
      .navbar-nav .dropdown:hover > .dropdown-menu { 
       display: block; 
      } 
      .navbar-nav .dropdown:hover > a[data-toggle=dropdown] + .dropdown-menu { 
       display: none; 
      } 
      .navbar-nav .dropdown.open > a[data-toggle=dropdown] + .dropdown-menu { 
       display: block; 
      } 
     </style>  
    </head> 

    <body> 

    <div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
      <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="http://getbootstrap.com/examples/navbar-fixed-top/#">SDK Tests Status</a> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-folder-open room-icn"></span> Rooms</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> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 

    <script type="text/javascript"> 
     $(function() { 
      var $win = $(window); 
      $win.resize(function() { 
       if ($win.width() > 768) 
        $(".navbar-nav > .dropdown > a").attr("data-toggle", ""); 
       else 
        $(".navbar-nav > .dropdown > a").attr("data-toggle", "dropdown"); 
      }).resize(); 
      $(".dropdown-menu").find("input, button").each(function() { 
       $(this).click(function (e) { 
        e.stopPropagation(); 
       }); 
      }); 
     }); 
    </script> 
    </body> 
</html>

Here is a bootply of it.

來源

2014-02-19 18:39:53 theRyanMark

工程！謝謝！ – FunJoy

不客氣。很愚蠢的是，它沒有內置選項。 – theRyanMark

不能同意更多 – FunJoy

引導程序下拉菜單

回答

相關問題