我正在尝试使用NavBar中的“Horses”标签，当我将鼠标悬停在其上或点击它时会出现一个下拉菜单。我希望“Horses”选项卡的下拉列表中包含“foals”，“mares”和“stallions”的无序列表。任何帮助将不胜感激。
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>VS Equine - European Sport Horses</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/business-casual.css" rel="stylesheet">
<!-- Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<div class="brand">VS Equine</div>
<div class="address-bar">Viksbergs Sateri | Sodertalje, Sweden | +46-70 699 67 40</div>
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
<a class="navbar-brand" href="index.html">VS Equine</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="blog.html">Horses</a>
</li>
<li>
<a href="USedition.html">US Edition</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="box">
<div class="col-lg-12 text-center">
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators hidden-xs">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive img-full" src="img/slide-1.jpg" alt="">
</div>
<div class="item">
<img class="img-responsive img-full" src="img/slide-2.jpg" alt="">
</div>
<div class="item">
<img class="img-responsive img-full" src="img/slide-3.jpg" alt="">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<h2 class="brand-before">
<small>Welcome to</small>
</h2>
<h1 class="brand-name">VS Equine</h1>
<hr class="tagline-divider">
<h2>
<strong>European Sport Horses</strong>
</small>
</h2>
</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">We don't just breed horses
<strong>We raise champions!</strong>
</h2>
<hr>
<img class="img-responsive img-border img-left" src="img/intro-pic.jpg" alt="">
<hr class="visible-xs">
<p>Viksbergs Säteri driver en liten familjeuppfödning med bara några få föl som föds varje år, i regel inte mer än 5. Vårt syfte med varje föl är att det skall bli en svårklasshäst som tävlar om de stora priserna i framtiden. </p>
<p>Vi sysslar inte med massuppfödning! Vi är djupt specialiserade på hopphästar av den högsta kalibern. Vi använder därför enbart ston som antingen har visat sig ge fantastiska avkommor tidigare eller som själva har visat att de är av yppersta klass, helst både och.</p>
<p>Vi bygger på lång sikt och hållbarhet är ett av våra ledord. På det viset skapar vi hästar som har stor kapacitet, har tillit till sin ryttare, håller på lång sikt och gör det där extra för sin ryttare som är helt avgörande i de stora klasserna. Många elitryttare kan intyga att just kopplingen mellan ryttaren (människan) och hästen är helt avgörande för resultatet. Vi tror att det är detta som skapar Champions som håller på lång sikt!.</p>
</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">VS Equine
<strong>and partners</strong>
</h2>
<hr>
<p>Vi samarbetar med andra företag i hästbranchen – både i Sverige och utomlands. Vi ställer samma krav på dem som vi ställer på oss själva. Ärlighet, Öppenhet, Hållbarhet och Kvalitet är våra ledord. För att arbeta väl tillsammans behöver även våra samarbetspartners ha samma värdegrund som vi själva har. </p>
<p>Vårt samarbete med andra gör att vi ofta kan finna den specifika häst som en potentiell kund söker, även om vi inte har en sådan själv. Vi har möjlighet att före köpet ge hästen den speciella träning som behövs för att den skall passa sin nya ryttare. Om du funderar på att köpa en ny häst ställ därför gärna en förfrågan till oss på: info@VS-equine.eu.</p>
</div>
</div>
</div>
</div>
<!-- /.container -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p>Copyright © VS Equine 2015</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
答案 0 :(得分：0)
要获得下拉列表，首先需要使用标记来列出here。
标记应该如下所示（我们还要添加一个id来设置悬停功能）：
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" id="hover-drop">Horses <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Foals</a></li>
<li><a href="#">Mares</a></li>
<li><a href="#">Stallions</a></li>
</ul>
</li>
现在对于javascript，它将抓取我们创建的元素，以跟踪我们何时悬停（让我们将代码包围在初始化程序中，以便在所有查询元素完成并且文档准备好之后它才会启动）：
<script>
$(function() {
$('.carousel').carousel({
interval: 5000 //changes the speed
})
$('#hover-drop').hover(function() {
$(this).dropdown('toggle');
});
});
</script>
那么整个页面看起来像这样：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>VS Equine - European Sport Horses</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/business-casual.css" rel="stylesheet">
<!-- Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="brand">VS Equine</div>
<div class="address-bar">Viksbergs Sateri | Sodertalje, Sweden | +46-70 699 67 40</div>
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
<a class="navbar-brand" href="index.html">VS Equine</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" id="hover-drop">Horses <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Foals</a></li>
<li><a href="#">Mares</a></li>
<li><a href="#">Stallions</a></li>
</ul>
</li>
<li>
<a href="USedition.html">US Edition</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="box">
<div class="col-lg-12 text-center">
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators hidden-xs">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive img-full" src="img/slide-1.jpg" alt="">
</div>
<div class="item">
<img class="img-responsive img-full" src="img/slide-2.jpg" alt="">
</div>
<div class="item">
<img class="img-responsive img-full" src="img/slide-3.jpg" alt="">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<h2 class="brand-before">
<small>Welcome to</small>
</h2>
<h1 class="brand-name">VS Equine</h1>
<hr class="tagline-divider">
<h2>
<strong>European Sport Horses</strong>
</small>
</h2>
</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">We don't just breed horses
<strong>We raise champions!</strong>
</h2>
<hr>
<img class="img-responsive img-border img-left" src="img/intro-pic.jpg" alt="">
<hr class="visible-xs">
<p>Viksbergs Säteri driver en liten familjeuppfödning med bara några få föl som föds varje år, i regel inte mer än 5. Vårt syfte med varje föl är att det skall bli en svårklasshäst som tävlar om de stora priserna i framtiden. </p>
<p>Vi sysslar inte med massuppfödning! Vi är djupt specialiserade på hopphästar av den högsta kalibern. Vi använder därför enbart ston som antingen har visat sig ge fantastiska avkommor tidigare eller som själva har visat att de är av yppersta klass, helst både och.</p>
<p>Vi bygger på lång sikt och hållbarhet är ett av våra ledord. På det viset skapar vi hästar som har stor kapacitet, har tillit till sin ryttare, håller på lång sikt och gör det där extra för sin ryttare som är helt avgörande i de stora klasserna. Många elitryttare kan intyga att just kopplingen mellan ryttaren (människan) och hästen är helt avgörande för resultatet. Vi tror att det är detta som skapar Champions som håller på lång sikt!.</p>
</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">VS Equine
<strong>and partners</strong>
</h2>
<hr>
<p>Vi samarbetar med andra företag i hästbranchen – både i Sverige och utomlands. Vi ställer samma krav på dem som vi ställer på oss själva. Ärlighet, Öppenhet, Hållbarhet och Kvalitet är våra ledord. För att arbeta väl tillsammans behöver även våra samarbetspartners ha samma värdegrund som vi själva har. </p>
<p>Vårt samarbete med andra gör att vi ofta kan finna den specifika häst som en potentiell kund söker, även om vi inte har en sådan själv. Vi har möjlighet att före köpet ge hästen den speciella träning som behövs för att den skall passa sin nya ryttare. Om du funderar på att köpa en ny häst ställ därför gärna en förfrågan till oss på: info@VS-equine.eu.</p>
</div>
</div>
</div>
</div>
<!-- /.container -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p>Copyright © VS Equine 2015</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel And add hover -->
<script>
$(function() {
$('.carousel').carousel({
interval: 5000 //changes the speed
});
$('#hover-drop').hover(function() {
$(this).dropdown('toggle');
});
});
</script>
</body>
</html>
此外，在问题中正确格式化代码也有助于注意到错误。