Bootstrap下拉菜單不起作用（回答其他類似問題不起作用！）

Question

我知道之前曾有人問過這個問題，但是似乎沒有一個答案能證明是可行的。

我用一個下拉菜單在引導程序中創建了一個導航菜單，該示例幾乎復制了該示例。 但是，當我單擊下拉列表時，沒有任何反應。 我已經包含了指向JQuery的鏈接，包括了通過CDN進行的引導CSS / JS鏈接，但沒有任何效果。 我還確保將JQuery放在引導程序之前。

我還嘗試了刪除！-可選主題引導鏈接（因為有人說多個引導鏈接已引起問題..）...但是什么也沒有。

這可能是因為我在本地服務器上運行它嗎？ 我對此表示懷疑

讓我知道你的想法！ 謝謝！

這是我的代碼：

<!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">
<script
    src="https://code.jquery.com/jquery-3.1.1.js"
    integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
    crossorigin="anonymous"></script>
<link rel="normalize.css"> 
<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet"> 
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<!-- 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>
<link rel="stylesheet" type="text/css" href="/style.css">

<?php wp_head(); ?>
</head>
<header>
<div class="container">
<div class="row>">
<div class="col-xl-12">
  <img class="logo" src="<?php bloginfo('template_directory');?>/HSF.png">
  <h1 class="title">TITLE</h1>
</div>
</div>
<div class="container">
<div class="row">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="fwcnav" aria-expanded="false">
      <span class="sr-only">Toggle Navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Emerge</a>
  </div>
<div class="collapse navbar-collapse" id="fwcnav">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home <span class="sr-only">(current) </span></a></li>
    <li><a href="#">Recipes</a></li>
    <li><a href="#">Little Ones</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Workout With Me <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Workouts</a></li>
        <li><a href="#">Join A Challenge Group</a></li>
      </ul>
    </li>
  </ul>
</div>
</div>
</nav>
</header>

編輯

好的，所以我發現我的index.php中也有一節，其中有指向樣式表的鏈接。 我擺脫了這一點，並擺脫了header.php中的樣式表鏈接，並且代碼工作正常。 我將鏈接放回標頭中的style.css，並再次搞砸了。 所以，我猜我CSS中的某些內容使此代碼變得混亂了嗎？

這是我的style.css：

/*
Theme Name: Title
Theme URI: Title
Description: X
Version: 1.0
Author: Author
Author URI: Website
*/

/* HEADER & NAVIGATION */

header {
    background-color: rgb(20,20,20);
      }

h1.title {
    padding-top: 50px;
    padding-left: 75px;
    text-align: center;
    font-size: 5em;
    font-family: 'Courgette', cursive;
    color: #f63a84;
}

/* BODY */

body {
    background-color: rgb(20,20,20);
 }

a {
    color: #f63a84;
    font-family: serif;
    text-decoration: none;
  }

a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
    text-decoration: none;
height: 60px;
width: 400px;
font-size: 2em;
background-color: #f63a84; 
color: white;
border: 2px solid black;
}

a.button2 {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
    text-decoration: none;
height: 60px;
width: 400px;
font-size: 1.5em;
background-color: #f63a84; 
color: white;
border: 2px solid black;
}

h2 {
    font-size: 28px;
    color: #f63a84;
    font-style: bold;
}

img.logo {
float: right;
width: 175px;
height: 175px;
padding-top: 0px;
}

/* NAVIGATION */

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-align: center;
}

li {
    display: inline-block;
    float: left;
}

a {
    display: block;
    padding: 8px;
}

/* CONTENT */

article {
    max-width: 950px;
    padding: 20px 0 100px 40px;
    margin-left: 40px;
}

article.home {
    padding: 20px 0 100px 0;
margin-left: 0px;
}

article.other {
    padding: 20px 0 100px 0;
margin-left: 0px;
}

article.blog-article {
    max-width: 950px;
    padding: 20px 0 50px 40px;
    margin-left: 40px;
margin-top: 0px;
}

p {
    font-size: 18px;
font-family: serif;
    line-height: 40px;
    color: rgb(248,248,248);
padding: 0 0 0 45px;
  }

button {
height: 60px;
width: 400px;
font-size: 2em;
background-color: #f63a84;; 
color: white;
border: 2px solid black;
}

.button:hover {
background-color: white;
color: #f63a84;
}

/* FOOTER */

footer {
    position: fixed;
    height: 100px;
    bottom: 0;
    width: 100%;
}

/* MEDIA RESPONSIVENESS */

@media (max-width: @screen-xl) {
h1.title {font-size: 1em;}
}

Answer 1

試試這個會起作用

 header { background-color: rgb(20,20,20); } h1.title { padding-top: 50px; padding-left: 75px; text-align: center; font-size: 5em; font-family: 'Courgette', cursive; color: #f63a84; } /* BODY */ body { background-color: rgb(20,20,20); } a { color: #f63a84; font-family: serif; text-decoration: none; } a.button { -webkit-appearance: button; -moz-appearance: button; appearance: button; text-decoration: none; height: 60px; width: 400px; font-size: 2em; background-color: #f63a84; color: white; border: 2px solid black; } a.button2 { -webkit-appearance: button; -moz-appearance: button; appearance: button; text-decoration: none; height: 60px; width: 400px; font-size: 1.5em; background-color: #f63a84; color: white; border: 2px solid black; } h2 { font-size: 28px; color: #f63a84; font-style: bold; } img.logo { float: right; width: 175px; height: 175px; padding-top: 0px; } /* NAVIGATION */ ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; text-align: center; } li { display: inline-block; float: left; } a { display: block; padding: 8px; } /* CONTENT */ article { max-width: 950px; padding: 20px 0 100px 40px; margin-left: 40px; } article.home { padding: 20px 0 100px 0; margin-left: 0px; } article.other { padding: 20px 0 100px 0; margin-left: 0px; } article.blog-article { max-width: 950px; padding: 20px 0 50px 40px; margin-left: 40px; margin-top: 0px; } p { font-size: 18px; font-family: serif; line-height: 40px; color: rgb(248,248,248); padding: 0 0 0 45px; } button { height: 60px; width: 400px; font-size: 2em; background-color: #f63a84;; color: white; border: 2px solid black; } .button:hover { background-color: white; color: #f63a84; } /* FOOTER */ footer { position: fixed; height: 100px; bottom: 0; width: 100%; } /* MEDIA RESPONSIVENESS */ @media (max-width: @screen-xl) { h1.title {font-size: 1em;} }

 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> <link href="https://fonts.googleapis.com/css?family=Catamaran:100|Luckiest+Guy|Quicksand:300|Asap:700|Montserrat:700|Open+Sans|Roboto|Signika:700" rel="stylesheet"/> </head> <body> <header> <div class="container"> <div class="row>"> <div class="col-xl-12"> <img class="logo" src="<?php bloginfo('template_directory');?>/HSF.png"> <h1 class="title">TITLE</h1> </div> </div> <div class="container"> <div class="row"> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#fwcnav" aria-expanded="true"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Emerge</a> </div> <div class="collapse navbar-collapse" id="fwcnav"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home <span class="sr-only">(current) </span></a></li> <li><a href="#">Recipes</a></li> <li><a href="#">Little Ones</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Workout With Me <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Workouts</a></li> <li><a href="#">Join A Challenge Group</a></li> </ul> </li> </ul> </div> </div> </nav> </header> </body> </html>

以下是您需要進行的更改-

使用data-target="#fwcnav" aria-expanded="true"代替data-target="fwcnav" aria-expanded="false"
嘗試使用我的CDN s 。

我已經包含了工作示例。

編輯

我編輯了代碼片段並使用了CSS。 似乎工作正常（ 下拉列表 ）。 查看工作片段。

因此，根據我的看法，您的包含路徑必定存在一些問題。 檢查是否兩次添加CSS文件。 那就是您將樣式表包括在index.php和header.php嘗試刪除其中之一，有時會導致問題。

Bootstrap下拉菜單不起作用（回答其他類似問題不起作用！）

問題描述

1 個解決方案

解決方案1
-1 2017-01-23 08:57:18

Bootstrap下拉菜單不起作用（回答其他類似問題不起作用！）

問題描述

1 個解決方案

解決方案1 -1 2017-01-23 08:57:18

解決方案1
-1 2017-01-23 08:57:18