Question

我知道之前已经问过这个问题，然而，似乎没有一个答案可以证明有效。

我已经使用下拉列表在bootstrap中创建了一个导航菜单，几乎从示例中复制了一下。但是，当我点击下拉列表时，没有任何反应。我已经包含了一个链接到JQuery，包括通过CDN的bootstrap CSS / JS链接，没有任何工作。我也确保将JQuery放在bootstrap之前。

我也尝试删除！ - OPTIONAL THEME bootstrap链接（因为有些人说多个引导链接导致了问题......）......但没有。

这可能是因为我在localsever上运行吗？我很怀疑......

让我知道你的想法！谢谢！

这是我的代码：

<!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 Dropdown不起作用（其他类似问题的答案无效！）

1 个答案: