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下拉不起作用

回答

相关问题