twitter下拉不起作用

這裏是我正在使用的代碼，但沒有顯示下拉菜單。我的JavaScript參考是按正確的順序。而且我還添加了一個下拉式切換功能。twitter下拉不起作用

<!-- Set the viewport so this responsive site displays correctly on mobile devices --> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title></title> 
    <!-- Include bootstrap CSS --> 
    <script src="includes/jquery/jquery-2.1.0.min.js"></script> 
<script src="includes/bootstrap/js/bootstrap.min.js"></script> 
<script type="text/javascript"> 
     $(document).ready(function() { 
      $('.dropdown-toggle').dropdown(); 
     }); 
</script> 
    <link href="includes/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="includes/style.css" rel="stylesheet"> 


    </head> 
    <body> 
      <div class= "navbar navbar-inverse navbar-static-top"> 
      <div class= "container"> 
       <a href="#" class="navbar-brand"> tech site</a> 
       <button= "navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
        <span class= "icon-bar"></span> 
        <span class= "icon-bar"></span> 
        <span class= "icon-bar"></span> 
       </button> 
       <div class= "collapse navbar-collapse navHeaderCollapse"> 
       <ul class= "nav navbar-nav navbar-right"> 
         <li><a href= "#" class="active"> Home</a> </li> 
         <li><a href= "#"> Login</a> </li> 
         <li class="dropdown"> 
          <a href= "#" class="dropdown-toggle" data-toggle="dropdown"> Social Media<b class="caret"></b></a>       
          <ul class="dropdown-menu"> 
         <li><a href= "#" class="active">Facebook</a> </li> 
         <li><a href= "#">Twitter</a> </li> 
         <li><a href= "#"> Google+</a> </li> 

          </ul> 
         </li> 
         <li><a href= "#"> About</a> </li> 
         <li><a href= "#"> Contact</a> </li> 
       </ul> 
       </div> 
      </div> 

    </body> 

<div> 

<div class="bottom"> 
     <div class="container"> 
      <div class="col-md-4"> 
       <h3><span class="glyphicon glyphicon-heart"></span> Footer section 1</h3> 
       <p>Content for the first footer section.</p> 
      </div> 
      <div class="col-md-4"> 
       <h3><span class="glyphicon glyphicon-star"></span> Footer section 2</h3> 
       <p>Content for the second footer section.</p> 
      </div> 
      <div class="col-md-4"> 
       <h3><span class="glyphicon glyphicon-music"></span> Footer section 3</h3> 
       <p>Content for the third footer section.</p> 
      </div> 
     </div> 
    </div> 
<!-- Include jQuery and bootstrap JS plugins --> 

</body> 
</html> 
</html>

來源

2014-09-20 himani agarwal

您的標記存在一些問題。您正在關閉一些元素，例如兩次。 – ChaoticNadirs 2014-09-20 16:07:08

您必須插入collapse插件，並使用包括jquery和bootstrap的wright版本。你不需要插入任何你自己的腳本來使它工作。下面是與最小的修改你的代碼，只是爲了它的工作原理：

<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Bootstrap Navbar Collapse</title> 

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    </head> 
<body> 
    <div class= "navbar navbar-inverse navbar-static-top"> 
      <div class= "container"> 
       <a href="#" class="navbar-brand"> tech site</a> 
       <button class= "navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
        <span class= "icon-bar"></span> 
        <span class= "icon-bar"></span> 
        <span class= "icon-bar"></span> 
       </button> 
       <div class= "collapse navbar-collapse navHeaderCollapse"> 
       <ul class= "nav navbar-nav navbar-right"> 
         <li><a href= "#" class="active"> Home</a></li> 
         <li><a href= "#"> Login</a></li> 
         <li class="dropdown"> 
          <a href= "#" class="dropdown-toggle" data-toggle="dropdown"> Social Media<b class="caret"></b></a>       
          <ul class="dropdown-menu"> 
         <li><a href= "#" class="active">Facebook</a></li> 
         <li><a href= "#">Twitter</a></li> 
         <li><a href= "#"> Google+</a></li> 

          </ul> 
         </li> 
         <li><a href= "#"> About</a></li> 
         <li><a href= "#"> Contact</a></li> 
       </ul> 
       </div> 
      </div> 
    <div> 


    <div class="bottom"> 
      <div class="container"> 
       <div class="col-md-4"> 
        <h3><span class="glyphicon glyphicon-heart"></span> Footer section 1</h3> 
        <p>Content for the first footer section.</p> 
       </div> 
       <div class="col-md-4"> 
        <h3><span class="glyphicon glyphicon-star"></span> Footer section 2</h3> 
        <p>Content for the second footer section.</p> 
       </div> 
       <div class="col-md-4"> 
        <h3><span class="glyphicon glyphicon-music"></span> Footer section 3</h3> 
        <p>Content for the third footer section.</p> 
       </div> 
      </div> 
    </div> 

</body> 
</html>

檢查此鏈接jsfiddle看到一個工作的例子。如果您將navbar navbar-inverse navbar-static-top的標籤從div更改爲nav，則會更好。並且還要將role="navigation"添加到每個導航欄以幫助實現無障礙。

希望它有用！

來源

2014-09-20 19:40:35 Academia

twitter下拉不起作用

回答

相關問題