Jquery 引导下拉列表不工作（其他类似问题的答案不工作！）_Jquery_Twitter Bootstrap_Drop Down Menu

Jquery 引导下拉列表不工作（其他类似问题的答案不工作！）

jquery twitter-bootstrap drop-down-menu

Jquery 引导下拉列表不工作（其他类似问题的答案不工作！）,jquery,twitter-bootstrap,drop-down-menu,Jquery,Twitter Bootstrap,Drop Down Menu,我知道以前有人问过这个问题，但是，似乎没有一个答案是有效的我在bootstrap中设计了一个导航菜单，它带有一个下拉菜单，几乎是从示例中复制过来的。然而，当我点击下拉菜单时，什么也没有发生。我已经包含了一个JQuery的链接，通过CDN包含了引导CSS/JS链接，但没有任何效果。我还确保将JQuery放在引导之前我也试着移除了！——可选的主题引导链接（正如一些人所说，多个引导链接导致了问题…）。。。但什么都没有这可能是因为我在本地服务器上运行它吗？我对此表示怀疑让我知道你的想法！谢谢这

我知道以前有人问过这个问题，但是，似乎没有一个答案是有效的

我在bootstrap中设计了一个导航菜单，它带有一个下拉菜单，几乎是从示例中复制过来的。然而，当我点击下拉菜单时，什么也没有发生。我已经包含了一个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>

试试这个，会有用的

标题{
背景色：rgb（20,20,20）；
}
h1.标题{
填充顶部：50px；
左侧填充：75px；
文本对齐：居中；
字号：5em；
字体系列：“小胡瓜”，草书；
颜色：#f63a84；
}
/*身体*/
身体{
背景色：rgb（20,20,20）；
}
a{
颜色：#f63a84；
字体系列：衬线；
文字装饰：无；
}
a、 钮扣{
-webkit外观：按钮；
-moz外观：按钮；
外观：按钮；
文字装饰：无；
高度：60px；
宽度：400px；
字号：2em；
背景色：#f63a84；
颜色：白色；
边框：2件纯黑；
}
a、 按钮2{
-webkit外观：按钮；
-moz外观：按钮；
外观：按钮；
文字装饰：无；
高度：60px；
宽度：400px；
字号：1.5em；
背景色：#f63a84；
颜色：白色；
边框：2件纯黑；
}
氢{
字号：28px；
颜色：#f63a84；
字体风格：粗体；
}
img.logo{
浮动：对；
宽度：175px；
高度：175px；
填充顶部：0px；
}
/*航行*/
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
文本对齐：居中；
}
李{
显示：内联块；
浮动：左；
}
a{
显示：块；
填充：8px；
}
/*内容*/
文章{
最大宽度：950px；
填充：20px 0 100px 40px；
左边距：40px；
}
第1条回家{
填充：20px 0 100px 0；
左边距：0px；
}
第条其他{
填充：20px 0 100px 0；
左边距：0px；
}
博客文章{
最大宽度：950px；
填充：20px 0 50px 40px；
左边距：40px；
边际上限：0px；
}
p{
字号：18px；
字体系列：衬线；
线高：40px；
颜色：rgb（248248248）；
填充：0 45px；
}
钮扣{
高度：60px；
宽度：400px；
字号：2em；
背景色：#f63a84；；
颜色：白色；
边框：2件纯黑；
}
.按钮：悬停{
背景色：白色；
颜色：#f63a84；
}
/*页脚*/
页脚{
位置：固定；
高度：100px；
底部：0；
宽度：100%；
}
/*媒体响应*/
@介质（最大宽度：@screen xl）{
h1.title{字体大小：1em；}
}


引导盒
/HSF.png“>
标题
切换导航

浏览器控制台有任何线索吗？不确定你的意思吗？检查元素？查看源代码？工作输出加入频道组下拉列表？它在我的位置工作，我使用你的代码，它工作正常，我同意！我自己在W3中运行了代码，尝试一下，效果很好。我在本地主机上删除了指向我自己的样式表的链接，但这没有帮助。仍然不工作。SOOO，我想一定是我的index.php或footer php上的某些内容导致下拉列表在页眉中不工作？有什么想法吗？请检查我对主要问题的编辑！一定是我的样式表中的某些内容。。。

/*
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;}
}