我遇到了基于 Bootstrap 的下拉菜单的问题(没什么特别的，只是一个导航)。一切顺利，但当我想通过单击折叠下拉菜单时，它会消失，但当我悬停或再次单击它时会显示出来。我已经阅读了一些关于 stopPropagation() 函数的线程，但它仍然不起作用。这是我的代码。
<!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="Matt O'Such">
<title></title>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style>
body {
background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.8)), url("images/background-homepage.jpg");
background-image: -moz-linear-gradient(top, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.8)), url("images/background-homepage.jpg");
background-image: -o-linear-gradient(top, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.8)), url("images/background-homepage.jpg");
background-image: -ms-linear-gradient(top, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.8)), url("images/background-homepage.jpg");
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(51, 51, 51, 0.8)), to(rgba(51, 51, 51, 0.8))), url("images/background-homepage.jpg");
background-image: -webkit-linear-gradient(top, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.8)), url("images/background-homepage.jpg");
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background-homepage.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background-homepage.jpg', sizingMethod='scale')";
}
.navbar-default .navbar-nav>li>a
{
color:#e6e6e6;
font-size:11px;
padding-top:22px;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
color:#f9f9f9;
background:#2f2b2e;
border-bottom:2px solid #bfff51;
font-size:11px;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
color:#f9f9f9;
background:#2f2b2e;
border-bottom:2px solid #bfff51;
font-size:11px;
}
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #fefefe;
white-space: nowrap;
background:#4c4649;
font-size:11px;
}
.dropdown-menu {
position:absolute;
padding:0px;
border-radius:0px;
border:0px;
min-width:0;
background:red;font-size:11px;
}
.wrapper {
}
.homepage-welcome {
font-family:Lobster;
font-size:2em;
color:#fefefe;}
.homepage-title{
font-family:'Open Sans';
font-size:3em;
color:#fefefe;}
}
</style>
<script>
$(document).ready(function () {
//$(".nav li").removeClass("active");
$('.menu-item-home').addClass('active');
//for demo
//$('#demo').addClass('active');
//for sale
//$('#sale').addClass('active');
$('.dropdown-menu input').click(function(e) {
e.stopPropagation();
});
});
</script>
</head>
<body>
<div class="wrapper">
<nav class="navbar navbar-default" style="border-radius:0px;background:none;border:0px;">
<div class="container-fluid" style="">
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a title "Matt's portfolio - go to homepage" style="margin-left:20px;margin-top:2px;" class="navbar-brand page-scroll" href="#"><img alt="Matt's portfolio logo" src="images/wm-logo.png" /></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" style="text-transform:uppercase;margin-right:20px;">
<li class="menu-item-home">
<a href="/home">Home</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Projects <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/projects/graphics">Graphics</a></li>
<li><a href="/projects/websites">Websites</a></li>
<li><a href="/projects/others">Others</a></li>
</ul>
</li>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h3 class="homepage-welcome">My name is Matt and this is my portfolio. </h3>
<h1 class="homepage-title">I make the Internet a better place.</h1>
<p>Passionate about People. Targeted on feelings and relationships. <br />Charmed by modern, frontend technologies.</p>
</div>
</div>
</div>
</div>
</body>
最佳答案
由于您的代码和问题不是很清楚，但我仍然尝试根据一些理解来回答您的问题，这可能是您问题的答案。
案例一:
我认为您不想在单击下拉菜单的任何元素时隐藏下拉菜单，因为您已经为此编写了一些脚本。 但是您添加了“input”标签，该标签不应该存在，因为下拉菜单中没有“input”标签。 使用下面的脚本，
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
案例二:
如果您不想在单击下拉按钮时隐藏下拉菜单，只需删除“data-toggle”属性，因为它会在您每次单击按钮时切换下拉菜单。
<li class="dropdown" id="dropDownBtn">
<a class="dropdown-toggle" href="#">Projects <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/projects/graphics">Graphics</a></li>
<li><a href="/projects/websites">Websites</a></li>
<li><a href="/projects/others">Others</a></li>
</ul>
</li>
并添加以下脚本，
$("#dropdownBtn").on('click',function(){
$(this).parent().addClass('open');
});
$(document).on('click',function(el){
if(el.target.id != "dropdownBtn"){ //give some condition which suits your code
$('.dropdown').removeClass('open');
}
});
案例 3: 正如您所提到的，您想通过单击来折叠下拉菜单。我不明白这一点，因为这是 Bootstrap 的正常行为。 但是如果你想让下拉菜单只显示一次，那么你可以在 case-2 中使用 one() 方法
$("#dropdownBtn").one('click',function(){
$(this).parent().addClass('open');
});
让我知道哪种情况适合您，如果上述两种情况都不能帮助您，那么请清除问题，我很乐意帮助您。 :)
关于html - Bootstrap的下拉菜单点击两次后消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44248457/