堆栈内存溢出
  繁体   English   中英

我的Bootstrap Navbar切换未切换

[英]My Bootstrap Navbar Toggle is Not Toggling

 原文  2019-01-30 12:00:07  9   2    jquery/ html/ css/ twitter-bootstrap/ material-design

问题描述

因此，我已经苦苦挣扎了数周，试图了解以下代码的错误之处。 就像我想要的那样工作，直到我缩小浏览器，然后无论我单击切换开关多少次，菜单都将保持打开状态。 我希望将其作为默认行为关闭并仅在单击切换开关时打开。

我已经做过数千遍了，但是这次却行不通了！ 非常感谢任何帮助！ 

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>WEBPAGE</title>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- Bootstrap core CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="css/mdb.min.css" rel="stylesheet">
  <!-- Custom styles -->
  <link href="css/style.css" rel="stylesheet">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

<body>
    <!--Main Navigation-->
    <header>
      <nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar">
        <a class="navbar-brand bg-dark" href="#"><strong>NAME</strong></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navbarSupportedContent" class="navi collapse navbar-collapse d-flex justify-content-between">
            <ul class="navbar-nav navbar-right">
                <li class="nav-item active">
                  <a class="nav-link text-dark" href="#">HOME <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-dark active" href="#">OPTION1</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-dark" href="#">OPTION2</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-dark" href="#">OPTION3</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-dark" href="#">OPTION4</a>
                </li>
              <li class="nav-item">
                  <a class="nav-link text-dark" href="#">OPTION5</a>
                </li>
              <li class="nav-item">
                  <a class="nav-link text-dark" href="#">OPTION6</a>
                </li>
        </div>
      </nav>  
    </header>

<!-- SCRIPTS -->
  <!-- JQuery -->
  <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="js/mdb.min.js"></script>
</body>

2 个解决方案

解决方案1
 0  2019-01-30 12:04:52

这仅仅是因为您要导入cdn和local js两次的bootstrap.min.js 。

删除CDN js，它将正常运行（并且不要忘记，始终将Jquery放在所有bootsrap js文件的顶部）

还要删除所有重复的CSS CDN。

解决方案2
 0  2019-01-30 12:33:41

仅使用此html代码..........不要签入代码片段..只需复制html cody并签入您的文件..因为文件路径来自您的文件夹。 

 <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>WEBPAGE</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- Font Awesome --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Material Design Bootstrap --> <link href="css/mdb.min.css" rel="stylesheet"> <!-- Custom styles --> <link href="css/style.css" rel="stylesheet"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> </head> <body> <!--Main Navigation--> <header> <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <a class="navbar-brand" href="#">Hidden brand</a> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link text-dark" href="#">HOME <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link text-dark active" href="#">OPTION1</a> </li> <li class="nav-item"> <a class="nav-link text-dark" href="#">OPTION2</a> </li> <li class="nav-item"> <a class="nav-link text-dark" href="#">OPTION3</a> </li> <li class="nav-item"> <a class="nav-link text-dark" href="#">OPTION4</a> </li> <li class="nav-item"> <a class="nav-link text-dark" href="#">OPTION5</a> </li> <li class="nav-item"> <a class="nav-link text-dark" href="#">OPTION6</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> </header> <!-- SCRIPTS --> <!-- JQuery --> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="js/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="js/mdb.min.js"></script> </body>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Bootstrap响应式导航栏无法切换 Bootstrap导航栏切换不呈现 Bootstrap 4 Navbar切换中断 Bootstrap导航栏不会切换 Bootstrap 3导航栏切换不起作用 我的 jquery 切换 function 不切换 Bootstrap Navbar Toggle无法正确呈现 尝试使用Bootstrap导航栏切换 Bootstrap导航栏切换按钮未折叠 Bootstrap导航栏切换不适用于Laravel
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM