启动切换按钮不打开点击或触摸移动按钮

Bootstraps toggle button does not open on click or touch on mobile button

本文关键字：按钮 触摸 移动 启动      更新时间：2023-09-26

我想在bootstrap中创建一个导航栏

一切都很好，除了一个。当我调整浏览器大小到手机宽度并点击切换按钮时，下拉菜单不打开。

请帮帮我。所有我想要的是"当我点击堆叠的togel按钮时，我希望下拉按钮打开"。

我还对按钮的data-toggle属性中的class和id进行了更改。

我已经包括jquery, bootstrap js和bootstrap css。我已经在下面显示了整个代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Sellr Buyr</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="keywords" content="keywords1, change later">
        <!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
        <!-- stylesheets and js paths must be updated later -->
        <link rel="stylesheet" href="_sources/bootstrap/css/bootstrap.css">
        <link rel="stylesheet" href="_sources/bootstrap/css/bootstrap-theme.css">
        <script src="js/vendor/modernizr-2.7.1.min.js"></script>
        <script src="_sources/bootstrap/js/bootstrap.js"></script>
    </head>
    <body>
        <header>
           <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="container"><!--fluid container-->
                    <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>
                    <div class="navbar-header"><!--nav-header-->
                    <a class="navbar-brand" href="homepage">$ SellrBuyr</a>
                    </div><!--/nav-header-->
                    <div class="collapse navbar-collapse"><!--main-nav-collapse-->
                    <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown"><a href="#">LOGIN<i class="caret"></i></a></li>
                    <li class="dropdown"><a href="#">REGISTER<i class="caret"></i></a></li>
                    <li class="btn-danger"><a href="#">PUBLISH YOUR AD FOR FREE</a></li>
                    </ul>
                    </div><!--/main-nav-collapse-->
                </div><!--/fluid container-->
            </nav>
        </header>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><'/script>')</script>
    </body>
</html>

尝试下面的代码来包含jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

更新:

你确定你链接bootstrap js文件正确吗?

删除bootstrap js，尝试在</body>之前和jQuery库之后添加它们。下面是正确的代码(希望:))

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Sellr Buyr</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="keywords" content="keywords1, change later">
        <!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
        <!-- stylesheets and js paths must be updated later -->
        <link rel="stylesheet" href="_sources/bootstrap/css/bootstrap.css">
        <link rel="stylesheet" href="_sources/bootstrap/css/bootstrap-theme.css">
    </head>
    <body>
        <header>
           <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="container"><!--fluid container-->
                    <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>
                    <div class="navbar-header"><!--nav-header-->
                    <a class="navbar-brand" href="homepage">$ SellrBuyr</a>
                    </div><!--/nav-header-->
                    <div class="collapse navbar-collapse"><!--main-nav-collapse-->
                    <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown"><a href="#">LOGIN<i class="caret"></i></a></li>
                    <li class="dropdown"><a href="#">REGISTER<i class="caret"></i></a></li>
                    <li class="btn-danger"><a href="#">PUBLISH YOUR AD FOR FREE</a></li>
                    </ul>
                    </div><!--/main-nav-collapse-->
                </div><!--/fluid container-->
            </nav>
        </header>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="_sources/bootstrap/js/bootstrap.js"></script>
        <script src="js/vendor/modernizr-2.7.1.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><'/script>')</script>
    </body>
</html>
相关文章：