jquery和bootstrap.js不起作用
jquery and bootstrap.js not working
大家好，请帮忙！
我已经经历了stackoverflow中的所有jquery问题。我尝试了一些解决方案，但我没有得到我想要的结果。我正在为我的公司制作一个单页网站，但我在为它带来响应能力方面遇到了麻烦。
代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Top Accountant. Providing solution for all your accounting needs</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.css" />
</head>
<body>
<!-- Navigation -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Top Accountant</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a href="#"class="dropdown-toggle" data-target=".dropdown">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 1</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<!-- End of Navigation -->
<!--Image slider-->
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<!--images size should be 1920-741 px -->
<div class="item active">
<img src="img/accountancy-services.png" />
<div class="container">
<div class="carousel-caption">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
<p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/images.jpg" />
<div class="container">
<div class="carousel-caption">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
<p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/accountant-9-tips.png"/>
<div class="container">
<div class="carousel-caption">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
<p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="Prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="Next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!--End Image slider-->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="js/bootstrap.js"></script>
到目前为止，我所做的事情很少。
1.）在移动设备或选项卡中查看网站时，导航栏消失并出现切换按钮。这工作正常。
2.）我在服务中有下拉菜单，这对我不起作用。3.）我也制作了一个轮播，它完美滑动，但没有响应左右单击图标。
我不知道有什么问题，因为 1 工作正常，但 2 和 3 不起作用。
请在这件事上帮助我，并告诉我哪里出错了。
提前谢谢。
仔细检查文档中的工作标记示例。您的标记几乎没有问题。使用 data-toggle="dropdown" 作为下拉列表，并且您的 href/class 属性没有间隔。删除下拉列表的data-target。
就轮播而言，next和prev区分大小写，因此您需要使用 data-slide="prev" .此外，由于您正在使用navbar-fixed-top不要忘记添加body {padding-top: 50px;}否则导航栏将覆盖您的轮播内容。
这是一个工作更新：http://codeply.com/go/gJvCndru8B
将整个 html 代码替换为以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Top Accountant. Providing solution for all your accounting needs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<!-- Navigation -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Top Accountant</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Services
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 1</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<!-- End of Navigation -->
<!--Image slider-->
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<!--images size should be 1920-741 px -->
<div class="item active">
<img src="img/accountancy-services.png" />
<div class="container">
<div class="carousel-caption">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
<p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/images.jpg" />
<div class="container">
<div class="carousel-caption">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
<p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/accountant-9-tips.png"/>
<div class="container">
<div class="carousel-caption">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
<p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="Prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="Next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!--End Image slider-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
要修复您的下拉菜单：
data-toggle=".dropdown" => data-toggle="dropdown" 不带.
对于轮播，我不明白您的问题，但请查看文档
相关文章：
- Js.erb VS按钮标记-不'不起作用.为什么?
- 为什么indexOf在这个js代码中不起作用
- 淘汰赛.JS'启用'长度绑定条件不起作用
- JS动态添加字段-删除按钮不起作用
- Knockout.JS标签在foreach内部不起作用
- 角度 JS + 重定向不起作用
- JS中的乘法不起作用
- Angular js+ng repeat+字母数字索引不起作用
- 角度Js ng-disabled不起作用
- 路径 lo 加载本地主机子文件夹中的文件不起作用.js仅在基路径中
- Jquery Carousel 不起作用(JS 问题）
- 验证方法在主干网中不起作用.js
- 应用程序.js在骨干中不起作用.js + 要求.js
- 路由在角度下不起作用.js - 没有控制台或语法错误
- Int from for 循环在函数中不起作用 - JS
- 为什么代码不起作用JS
- 为什么这个代码在iPad Pro上不起作用?(JS）
- .将Integer推入数组不起作用JS/JQuery
- 我的下拉列表不起作用-JS有问题
- Bootstrap弹出，粘贴不起作用.JS加载问题
