我正在尝试向我的网页添加下拉菜单和轮播。到目前为止，它们已经被添加，这意味着菜单的图标在那里，轮播的第一张图片在页面上，但是当我点击下拉菜单时……没有任何反应!与旋转木马相同。谁能帮忙。 这是轮播的代码:
<!DOCTYPEhtml>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width-device-width, intial-scale=1">
<title>Daniel Vaughan</title>
<!--Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Abel|Archivo+Narrow|Barlow|Cabin|Courgette|Dancing+Script|Kanit|Questrial" rel="stylesheet">
<!-- bootstrap.3 css -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.js" type="text/javascript" charset="utf-8" async defer>
</script>
<style>
Body{
background-image:url(images/Omen-Background.jpg);
background-position: center;
color: red;
font-family: 'Barlow','arial', 'Cabin';
font-weight: bold;
font-size: 18px;
}
.navbar{
background-image: inherit;
color:inherit;
}
#aboutme{
margin: 50px 40px 40px 50px;
padding: 50px 25px 25px 50px;
background-image: inherit;
color: grey;
text-shadow: 1px 1px 2px red;
font-family: 'Barlow';
font-size: 18px;
}
p{
background: rgba("204, 204, 204, 0.5";
color: grey;
text-shadow: 1px 1px 2px red;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 text-left">
<img class="title-logo" src="images/omen-digital.jpg" height="70px" width="100x" alt="Omen logo">
</div>
<div class="col-md-6 text-right text-uppercase">
<h1 class="text-super">Daniel Vaughan</h1>
<h4>Freelance Developer</h4>
</div>
</div>
<header>
<div class="container">
<div class="dropdown">
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span></button>
<ul class="dropdown-menu">
<a href="danvaughan.html"><li>Home</li></a>
<a href="projects.html"><li>Projects</li></a>
<a href="employment.html"><li>Employment History</li></a>
<a href="hobbies.html"><li>Hobbies</li></a>
</ul>
</div>
</div>
</header>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators black">
<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-sldie-to ="2"></li>
<li data-targert="#myCarousel" data-slide-to ="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/family.jpg" style="width:100%">
<div class="carousel-caption">
<h3>First family holiday</h3>
</div>
</div>
<div class="item">
<img class="image-responsive" src="images/thebar.jpg" style="width:100%">
<div class="carousel-caption">
<h3>My Favourite Hobbie</h3>
</div>
</div>
<div class="item">
<img class="image-responsive" src="images/light-bringer.jpg" style="width=100%">
<div class="carousel-caption">
<h3>Some of my favourite books</h3>
</div>
</div>
<div class="item">
<img class="image-responsive" src="images/omen-digital.jpg" style="width:100%">
<div class="carousel-caption">
<h3>Gaming (my second favourite hobbie)</h3>
</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>
<div class="container-fluid">
<div class="row">
<div class="col-6 text-left" id="aboutme">
<h1> A Little About Me</h1>
<p class="text-left">Hello<br/> My name is Daniel Vaughan (Dan). Welcome to my website.</p>
<p class="text-left">I am a freelance web developer based in Birmingham UK. I have gained experience in the field of web development through the good people at Freecode camp, where I learned how to code. I love coding.<br/> It gives me great satisfaction when I make websites that are responsive and beautiful.At the moment I am in the market for part-time work as I am still employed as a machine operator.</p>
</div>
</div>
</div>
<script>
$("document").ready(function(){
$("#item").click(function(){
$("#submenu").slideToggle(500);
});
});
</script>
</body>
最佳答案
你加了吗。在源https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js和 https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js ??
关于jquery - bootstrap 3 下拉菜单和轮播，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48968289/