堆棧內存溢出
  簡體   English   中英

Bootstrap Navbar下拉菜單在瀏覽器中不起作用，Codepen可以

[英]Bootstrap Navbar Dropdown Not Working in Browser, Codepen okay

 原文  2017-05-26 20:12:41  6   2    javascript/ jquery/ twitter-bootstrap

問題描述

我有一個帶有導航欄的文檔，該菜單的下拉菜單將無法使用。 它可以在我的Codepen中工作 ，但不能通過我的text-editor（Sublime）工作。 我到處都在尋找解決方案，所以我在這里。

我努力了：
-引導文檔
-確保jQuery腳本在Boostrap腳本之前
-三次檢查我的關閉
-搜索Google和StackOverflow的很多內容。
-添加以下代碼： 

 <script>
      $("document").ready(function() {
        $(".dropdown").dropdown();
      });
    </script>

我認為這是相關的代碼。 我的錯誤的任何見解將不勝感激。 

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head
       content must come *after* these tags -->
    <title>JakobiArtWorks</title>
    <link href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel = "stylesheet">
    <link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet">
    <link href = "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel = "stylesheet">
    <link href = "https://fonts.googleapis.com/css?family=Russo+One" rel = "stylesheet">
    <link href = "style.css" rel = "stylesheet">
</head>

<body>

<header>
    <!--nav-->
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded" id = "top">
  <button class="navbar-toggler navbar-toggler-right" 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>
  <a class="navbar-brand" href="#">JAW</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#art">Art</a>
                 <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Material
        </a>

        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#wire">Wire</a>
          <a class="dropdown-item" href="#clay">Clay</a>
          <a class="dropdown-item" href="#plywood">Plywood</a>
          <a class = "dropdown-item" href = "#concrete">Concrete</a>
        </div>
            </li>
      </li>
    </ul>
            <ul class = "nav navbar-nav navbar-right">
                <li><a href = "#">Contact</a></li>
            </ul>
  </div>
</nav>
<!--end nav-->
</header>

...

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
    <script src = "script.js"></script>
</body>
</html>

2 個解決方案

解決方案1
 0  2017-05-26 20:24:06

好吧，在<a class = "dropdown-item" href = "#concrete">Concrete</a>將其<a class = "dropdown-item" href = "#concrete">Concrete</a>之后，您會得到額外的</li> 。 並且在腳本中應該指向dropdown-toggle

錯誤 

  $("document").ready(function() {
    $(".dropdown").dropdown();
  });

刪除文檔中的""並添加.dropdown，應這樣寫

正確 

 $(document).ready(function() {
    $(".dropdown-toggle").dropdown();
  });

演示與您的代碼

解決方案2
 0 已采納  2017-05-26 20:30:18

問題是您使用了引導程序的兩個不同版本的引導程序。 在標頭中，使用Bootstrap 4.0.0-alpha.6的CSS，在正文的最后，使用JavaScript 3.3.7版。 您可以使用其中之一，但不能同時使用。

該代碼對我有用： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head
         content must come *after* these tags -->
    <title>JakobiArtWorks</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
          integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
</head>

<body>

<header>
    <!--nav-->
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded" id="top">
        <button class="navbar-toggler navbar-toggler-right" 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>
        <a class="navbar-brand" href="#">JAW</a>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#art">Art</a>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Material
                    </a>

                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#wire">Wire</a>
                        <a class="dropdown-item" href="#clay">Clay</a>
                        <a class="dropdown-item" href="#plywood">Plywood</a>
                        <a class="dropdown-item" href="#concrete">Concrete</a>
                    </div>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>
    <!--end nav-->
</header>

...

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
        integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
        integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
        integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="script.js"></script>
</body>
</html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 導航欄中的Bootstrap下拉菜單不起作用 Bootstrap中的下拉導航欄不起作用 引導導航欄下拉菜單不起作用 Bootstrap 導航欄下拉菜單和漢堡不起作用 Bootstrap導航欄下拉菜單在移動設備中不起作用 Bootstrap 導航欄下拉菜單不起作用 Rails 導航欄下拉菜單（折疊）在 Bootstrap 5 中不起作用 代碼在 Codepen 中工作，但在瀏覽器中不工作 導航欄下拉和折疊不起作用 [wordpress + bootstrap] Javascript / Navbar下拉列表不適用於Twitter Bootstrap
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM