我是jQuery和javascript的新手，我需要帮助......
$(document).ready(function () {
$('.dropdown-submenu .active-dropdown').on("click", function (e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});body {
padding-bottom: 40px;
color: #5a5a5a;
}
.navbar-wrapper {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 20;
}
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar .container {
width: auto;
}
.carousel {
height: 500px;
margin-bottom: 60px;
}
.carousel-caption {
z-index: 10;
}
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
.marketing .col-lg-4 {
margin-bottom: 20px;
text-align: center;
}
.marketing h2 {
font-weight: normal;
}
.marketing .col-lg-4 p {
margin-right: 10px;
margin-left: 10px;
}
.featurette-divider {
margin: 80px 0;
}
.featurette-heading {
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
@media (min-width: 768px) {
/* Navbar positioning foo */
.navbar-wrapper .container {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar {
padding-right: 0;
padding-left: 0;
}
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
@media (min-width: 992px) {
.featurette-heading {
margin-top: 120px;
}
}
.arrow-up {
margin: 4px;
float: right;
}
#active {
color: #fff;
background-color: #080808;
}
.clickCursor {
cursor: pointer !important;
}
a.btn.btn-lg.btn-warning.errorright {
margin-left: 300px;
width: 255px;
}
a.btn.btn-lg.btn-warning.errorleft {
margin-right: 300px;
margin-top: -117px;
}
.carousel-indicators .active {
width: 25px;
height: 25px;
margin-bottom: -10px;
border-radius: 15px;
margin-left: 5px;
margin-right: 5px;
}
.carousel-indicators li {
width: 25px;
height: 25px;
margin-bottom: -10px;
border-radius: 15px;
margin-left: 5px;
margin-right: 5px;
}
.carousel-caption {
text-align: left;
}
p.left{
text-align: left;
margin-left: 10px;
}
p.right{
text-align: right;
}
h2.featurette-heading.trends{
margin-top: -40px;
}
a.scroll.no-decoration:hover,
a.scroll.no-decoration:active,
a.scroll.no-decoration:focus {
text-decoration: none;
color: #337ab7;
}
.all-width {
width: 100%;
}
.dropdown-toggle {
font-size: 20px;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
.nav>li>a {
display: inline-block;
}<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Pixel Pro | Tudo sobre jogos</title>
<!-- BS -->
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- FA -->
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<!-- Custom style and JS for this template -->
<link href="css/styles.css" rel="stylesheet">
<!-- Scripts -->
<!-- Smooth Scroll -->
<script>
$(document).ready(function () {
// Add smooth scrolling to all links
$("a.scroll").on('click', function (event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function () {
});
} // End if
});
});
</script>
</head>
<body>
<header>
<a id="pagetop"></a>
<div class="navbar-wrapper">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<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" id="active" href="/">Pixel Pro</a></li>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- Dropdown without any subdropdowns
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Sobre [Test] <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Indie <i class="fa fa-globe" aria-hidden="true"></i></li>
<li><a href="#">Minecraft</a></li>
<li><a href="#">Terraria</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">FPS <i class="fa fa-shield" aria-hidden="true"></i></li>
<li><a href="#">Counter-Strike: Global Offensive</a></li>
</ul>
-->
<li class="dropdown">
<a class="dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sobre <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Indie <i class="fa fa-globe" aria-hidden="true"></i></li>
<li class="dropdown-submenu">
<a class="clickCursor active-dropdown">Minecraft <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Topic 1</a></li>
<li><a href="#">Topic 2</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="clickCursor active-dropdown">Terraria <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Topic 3</a></li>
<li><a href="#">Topic 4</a></li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">FPS <i class="fa fa-shield" aria-hidden="true"></i></li>
<li class="dropdown-submenu">
<a class="clickCursor active-dropdown">Counter Strike: Global Offensive <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Topic 5</a></li>
<li><a href="#">Topic 6</a></li>
</ul>
</li>
</li>
</ul>
<!-- A third dropdown (which isn't necessary in this dropdown)
<li class="dropdown-submenu">
<a class="clickCursor active-dropdown">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
</ul>
</li>
-->
</ul>
</li>
</ul>
</li>
</li>
</ul>
</div>
</div>
</div>
</header>
<main>
<div id="GamesCarousel" class="carousel slide" data-ride="carousel">
<!-- To stop the automatic carousel, remove data-ride="carousel" -->
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#GamesCarousel" data-slide-to="0" class="active"></li>
<li data-target="#GamesCarousel" data-slide-to="1"></li>
<li data-target="#GamesCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Minecraft</h1>
<p>Minecraft é um jogo de construção de sandbox criado pela Mojang AB, fundada por Markus Persson (Notch). A jogabilidade
envolve jogadores que interagem com o mundo do jogo colocando e quebrando vários tipos de blocos em um ambiente
tridimensional.
</p>
<p><a class="btn btn-lg btn-warning all-width" href="/subjects/minecraft/index.html" role="button">Saber mais</a></p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Terraria</h1>
<p>Começa por construir abrigos básicos, encontra e pega minérios e outros recursos. Descobre e cria até 300 armas
de variedades mágicas, variadas e de corpo a corpo, bem como armaduras, e usa-as para combater centenas de
inimigos diferentes. Em breve, estarás a ir frente a frente com qualquer dúzia de chefes enormes.</p>
<p><a class="btn btn-lg btn-warning all-width" href="/subjects/terraria/index.html" role="button">Saber mais</a></p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>Counter Strike: Global Offensive</h1>
<p>Counter-Strike: Global Offensive (CS:GO) é um jogo de tiro em primeira pessoa online desenvolvido pela Valve
Corporation e pela Hidden Path Entertainment, sendo uma sequência de Counter-Strike: Source. É o quarto título
principal da franquia.</p>
<p><a class="btn btn-lg btn-warning all-width" href="/subjects/csgo/index.html" role="button">Saber mais</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#GamesCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#GamesCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container marketing">
<h2 class="featurette-heading trends">Melhores <span class="text-muted">tópicos</span></h2>
<div class="row">
<div class="col-lg-4">
<img class="img-circle" src="img/minecraft_index.png" alt="Generic placeholder image" width="140" height="140">
<h2 class="left">Minecraft</h2>
<p class="left">Minecraft é um jogo de construção de sandbox criado pela Mojang AB, fundada por Markus Persson (Notch). A jogabilidade
envolve jogadores que interagem com o mundo do jogo colocando e quebrando vários tipos de blocos em um ambiente
tridimensional.
</p>
<p><a class="btn btn-default" href="/subjects/minecraft/index.html" role="button">Saber Mais</a></p>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="img-circle" src="img/terraria_index.jpg" alt="Generic placeholder image" width="140" height="140">
<h2 class="left">Terraria</h2>
<p class="left">Começa por construir abrigos básicos, encontra e pega minérios e outros recursos. Descobre e cria até 300 armas
de variedades mágicas, variadas e de corpo a corpo, bem como armaduras, e usa-as para combater centenas de inimigos
diferentes. Em breve, estarás a ir frente a frente com qualquer dúzia de chefes enormes.</p>
<p><a class="btn btn-default" href="/subjects/terraria/index.html" role="button">Saber Mais</a></p>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="img-circle" src="img/csgo_index.jpg" alt="Generic placeholder image" width="140" height="140">
<h2 class="left">Counter Strike: Global Offensive</h2>
<p class="left">Counter-Strike: Global Offensive (CS:GO) é um jogo de tiro em primeira pessoa online desenvolvido pela Valve Corporation
e pela Hidden Path Entertainment, sendo uma sequência de Counter-Strike: Source. É o quarto título principal
da franquia.</p>
<p><a class="btn btn-default" href="/subjects/csgo/index.html" role="button">Saber Mais</a></p>
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">Porque deves escolher-<span class="text-muted">nos?</span></h2>
<p class="lead">Nós estamos a desenvolver um website muito elegante e moderno sem nenhum anúncio e feito com muito amor com toda
a informação precisa e necessária, no entanto, temos apenas Minecraft, Terraria e CS: GO por enquanto.</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive center-block" src="/img/heart.gif" alt="Generic placeholder image">
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7 col-md-push-5">
<h2 class="featurette-heading">Qual o <span class="text-muted">conteúdo</span> atual?</h2>
<p class="lead">Por agora, temos 3 matérias: Minecraft, Terraria, e CS:GO.</p>
</div>
<div class="col-md-5 col-md-pull-7">
<img class="featurette-image img-responsive center-block img-circle" src="/img/game.gif" alt="Generic placeholder image">
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">Quem é o <span class="text-muted">dono</span> deste website?</h2>
<p class="lead">O dono deste website chama-se Pedro, e é do sexo masculino. Este curte jogar jogos e também percebe um bocadinho
de programação, então, decidiu criar este website para ajudar todos os gamers e jogadores.</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive center-block img-circle" src="img/ExplodingPedro.jpg" alt="Generic placeholder image">
</div>
</div>
<footer>
<hr class="featurette-divider">
<a href="#pagetop" class="scroll no-decoration"><i class="fa fa-arrow-circle-up arrow-up" aria-hidden="true"></i><p class="pull-right">Voltar para o topo</a></p>
<p>© 2017 Pedro Ferreira ·</p>
</footer>
</main>
</div>
</body>
</html>
基本上我想，当有人点击下拉子菜单主题时，一切都保持原样，但是，当有人点击另一个下拉子菜单时，所有其他下拉子菜单都应该消失。 如果你得到了答案，请告诉我，我真的需要帮助。
- 编辑 -
我在另一件事情上也需要帮助，但是这个问题也是脚本问题，它必须在下拉子菜单中看到，所以我只想在这里编辑。
我想，当有人点击任何显示子下拉列表（a.active-dropdown）时，如果子下拉列表已经可见，则它变为不可见。
答案 0 :(得分：1)
在此之前：
$(this).next('ul').toggle();
你可以添加：
$(this).closest('.dropdown-menu').find('ul').hide();
为了关闭所有其他下拉列表。
摘录：
$('.dropdown-submenu .active-dropdown').on("click", function (e) {
//
// added next line
//
$(this).closest('.dropdown-menu').find('ul').hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
// Add smooth scrolling to all links
$("a.scroll").on('click', function (event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function () {
});
} // End if
});body {
padding-bottom: 40px;
color: #5a5a5a;
}
.navbar-wrapper {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 20;
}
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar .container {
width: auto;
}
.carousel {
height: 500px;
margin-bottom: 60px;
}
.carousel-caption {
z-index: 10;
}
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
.marketing .col-lg-4 {
margin-bottom: 20px;
text-align: center;
}
.marketing h2 {
font-weight: normal;
}
.marketing .col-lg-4 p {
margin-right: 10px;
margin-left: 10px;
}
.featurette-divider {
margin: 80px 0;
}
.featurette-heading {
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
@media (min-width: 768px) {
/* Navbar positioning foo */
.navbar-wrapper .container {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar {
padding-right: 0;
padding-left: 0;
}
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
@media (min-width: 992px) {
.featurette-heading {
margin-top: 120px;
}
}
.arrow-up {
margin: 4px;
float: right;
}
#active {
color: #fff;
background-color: #080808;
}
.clickCursor {
cursor: pointer !important;
}
a.btn.btn-lg.btn-warning.errorright {
margin-left: 300px;
width: 255px;
}
a.btn.btn-lg.btn-warning.errorleft {
margin-right: 300px;
margin-top: -117px;
}
.carousel-indicators .active {
width: 25px;
height: 25px;
margin-bottom: -10px;
border-radius: 15px;
margin-left: 5px;
margin-right: 5px;
}
.carousel-indicators li {
width: 25px;
height: 25px;
margin-bottom: -10px;
border-radius: 15px;
margin-left: 5px;
margin-right: 5px;
}
.carousel-caption {
text-align: left;
}
p.left {
text-align: left;
margin-left: 10px;
}
p.right {
text-align: right;
}
h2.featurette-heading.trends {
margin-top: -40px;
}
a.scroll.no-decoration:hover,
a.scroll.no-decoration:active,
a.scroll.no-decoration:focus {
text-decoration: none;
color: #337ab7;
}
.all-width {
width: 100%;
}
.dropdown-toggle {
font-size: 20px;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
.nav > li > a {
display: inline-block;
}<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<header>
<a id="pagetop"></a>
<div class="navbar-wrapper">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false"
aria-controls="navbar">
<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" id="active" href="/">Pixel Pro</a></li>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- Dropdown without any subdropdowns
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Sobre [Test] <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Indie <i class="fa fa-globe" aria-hidden="true"></i></li>
<li><a href="#">Minecraft</a></li>
<li><a href="#">Terraria</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">FPS <i class="fa fa-shield" aria-hidden="true"></i></li>
<li><a href="#">Counter-Strike: Global Offensive</a></li>
</ul>
-->
<li class="dropdown">
<a class="dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Sobre <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Indie <i class="fa fa-globe" aria-hidden="true"></i></li>
<li class="dropdown-submenu">
<a class="clickCursor active-dropdown">Minecraft <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Topic 1</a></li>
<li><a href="#">Topic 2</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="clickCursor active-dropdown">Terraria <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Topic 3</a></li>
<li><a href="#">Topic 4</a></li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">FPS <i class="fa fa-shield" aria-hidden="true"></i></li>
<li class="dropdown-submenu">
<a class="clickCursor active-dropdown">Counter Strike: Global Offensive <span
class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Topic 5</a></li>
<li><a href="#">Topic 6</a></li>
</ul>
</li>
</li>
</ul>
<!-- A third dropdown (which isn't necessary in this dropdown)
<li class="dropdown-submenu">
<a class="clickCursor active-dropdown">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
</ul>
</li>
-->
</ul>
</li>
</ul>
</li>
</li>
</ul>
</div>
</div>
</div>
</header>
<main>
<div id="GamesCarousel" class="carousel slide" data-ride="carousel">
<!-- To stop the automatic carousel, remove data-ride="carousel" -->
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#GamesCarousel" data-slide-to="0" class="active"></li>
<li data-target="#GamesCarousel" data-slide-to="1"></li>
<li data-target="#GamesCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide"
src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Minecraft</h1>
<p>Minecraft é um jogo de construção de sandbox criado pela Mojang AB, fundada por Markus
Persson (Notch). A jogabilidade
envolve jogadores que interagem com o mundo do jogo colocando e quebrando vários tipos de
blocos em um ambiente
tridimensional.
</p>
<p><a class="btn btn-lg btn-warning all-width" href="/subjects/minecraft/index.html"
role="button">Saber mais</a></p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide"
src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Terraria</h1>
<p>Começa por construir abrigos básicos, encontra e pega minérios e outros recursos. Descobre e
cria até 300 armas
de variedades mágicas, variadas e de corpo a corpo, bem como armaduras, e usa-as para
combater centenas de
inimigos diferentes. Em breve, estarás a ir frente a frente com qualquer dúzia de chefes
enormes.</p>
<p><a class="btn btn-lg btn-warning all-width" href="/subjects/terraria/index.html"
role="button">Saber mais</a></p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide"
src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>Counter Strike: Global Offensive</h1>
<p>Counter-Strike: Global Offensive (CS:GO) é um jogo de tiro em primeira pessoa online
desenvolvido pela Valve
Corporation e pela Hidden Path Entertainment, sendo uma sequência de Counter-Strike: Source.
É o quarto título
principal da franquia.</p>
<p><a class="btn btn-lg btn-warning all-width" href="/subjects/csgo/index.html" role="button">Saber
mais</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#GamesCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#GamesCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container marketing">
<h2 class="featurette-heading trends">Melhores <span class="text-muted">tópicos</span></h2>
<div class="row">
<div class="col-lg-4">
<img class="img-circle" src="img/minecraft_index.png" alt="Generic placeholder image" width="140"
height="140">
<h2 class="left">Minecraft</h2>
<p class="left">Minecraft é um jogo de construção de sandbox criado pela Mojang AB, fundada por Markus
Persson (Notch). A jogabilidade
envolve jogadores que interagem com o mundo do jogo colocando e quebrando vários tipos de blocos em
um ambiente
tridimensional.
</p>
<p><a class="btn btn-default" href="/subjects/minecraft/index.html" role="button">Saber Mais</a></p>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="img-circle" src="img/terraria_index.jpg" alt="Generic placeholder image" width="140"
height="140">
<h2 class="left">Terraria</h2>
<p class="left">Começa por construir abrigos básicos, encontra e pega minérios e outros recursos.
Descobre e cria até 300 armas
de variedades mágicas, variadas e de corpo a corpo, bem como armaduras, e usa-as para combater
centenas de inimigos
diferentes. Em breve, estarás a ir frente a frente com qualquer dúzia de chefes enormes.</p>
<p><a class="btn btn-default" href="/subjects/terraria/index.html" role="button">Saber Mais</a></p>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="img-circle" src="img/csgo_index.jpg" alt="Generic placeholder image" width="140"
height="140">
<h2 class="left">Counter Strike: Global Offensive</h2>
<p class="left">Counter-Strike: Global Offensive (CS:GO) é um jogo de tiro em primeira pessoa online
desenvolvido pela Valve Corporation
e pela Hidden Path Entertainment, sendo uma sequência de Counter-Strike: Source. É o quarto título
principal
da franquia.</p>
<p><a class="btn btn-default" href="/subjects/csgo/index.html" role="button">Saber Mais</a></p>
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">Porque deves escolher-<span class="text-muted">nos?</span></h2>
<p class="lead">Nós estamos a desenvolver um website muito elegante e moderno sem nenhum anúncio e feito
com muito amor com toda
a informação precisa e necessária, no entanto, temos apenas Minecraft, Terraria e CS: GO por
enquanto.</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive center-block" src="/img/heart.gif"
alt="Generic placeholder image">
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7 col-md-push-5">
<h2 class="featurette-heading">Qual o <span class="text-muted">conteúdo</span> atual?</h2>
<p class="lead">Por agora, temos 3 matérias: Minecraft, Terraria, e CS:GO.</p>
</div>
<div class="col-md-5 col-md-pull-7">
<img class="featurette-image img-responsive center-block img-circle" src="/img/game.gif"
alt="Generic placeholder image">
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">Quem é o <span class="text-muted">dono</span> deste website?</h2>
<p class="lead">O dono deste website chama-se Pedro, e é do sexo masculino. Este curte jogar jogos e
também percebe um bocadinho
de programação, então, decidiu criar este website para ajudar todos os gamers e jogadores.</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive center-block img-circle" src="img/ExplodingPedro.jpg"
alt="Generic placeholder image">
</div>
</div>
<footer>
<hr class="featurette-divider">
<a href="#pagetop" class="scroll no-decoration"><i class="fa fa-arrow-circle-up arrow-up"
aria-hidden="true"></i>
<p class="pull-right">Voltar para o topo</a></p>
<p>© 2017 Pedro Ferreira ·</p>
</footer>
</div>
</main>
</div>
答案 1 :(得分：1)
我已经简化了您的代码，因此它主要包含了代码的布局，而没有太多无关的页面内容。然后在JavaScript部分中，您会看到我添加了以下代码行：
$(this).closest('nav').find('.dropdown-submenu > ul').hide();
这会找到任何下拉子菜单并在打开你点击的子菜单之前隐藏它们。
我添加了这个作为click事件处理程序的第一行，因为它需要在打开一个之前隐藏打开的那个，否则它会打开菜单然后立即隐藏它。
$(document).ready(function(){
$('.dropdown-submenu .active-dropdown').click(function(e){
$(this).closest('nav').find('.dropdown-submenu > ul').hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});.navbar-wrapper {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 20;
}
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar .container {
width: auto;
}
@media (min-width: 768px) {
.navbar-wrapper .container {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar {
padding-right: 0;
padding-left: 0;
}
}
.dropdown-toggle {
font-size: 20px;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
.nav > li > a {
display: inline-block;
}<!DOCTYPE html>
<html lang="en">
<head>
<!-- BS -->
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- FA -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="navbar-wrapper">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars" style="color:#fff;"></i>
</button>
<a class="navbar-brand" id="active" href="#">Pixel Pro</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sobre <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Indie <i class="fa fa-globe" aria-hidden="true"></i></li>
<li class="dropdown-submenu">
<a class="clickCursor active-dropdown">Minecraft <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Topic 1</a></li>
<li><a href="#">Topic 2</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="clickCursor active-dropdown">Terraria <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Topic 3</a></li>
<li><a href="#">Topic 4</a></li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">FPS <i class="fa fa-shield" aria-hidden="true"></i>
</li>
<li class="dropdown-submenu">
<a class="clickCursor active-dropdown">Counter Strike: Global Offensive <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Topic 5</a></li>
<li><a href="#">Topic 6</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</header>
</body>
</html>