Question

这是我正在使用的代码，但下拉列表未显示。我的javascript参考是正确的顺序。我还添加了一个下拉切换功能。

<!-- 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>

Answer 1

您必须插入折叠插件，并使用包含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"添加到每个导航栏以帮助获取辅助功能。

希望它有用！

twitter下拉不工作

1 个答案: