0
我正在面对基于Bootstrap的下拉菜单的问题（没有什么奇特的，只是一个导航）。一切工作顺利，但是当我想通过单击它来折叠下拉菜单时，它会消失，但是当我将鼠标悬停或再次单击时会显示。我已经阅读了关于stopPropagation（）函数的一些线程，但它仍然不起作用。这是我的代码。Bootstrap的下拉菜单在两次点击后消失
<!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>
你的代码是不明确什么问题都能在这里找到工作的罚款。你可能不得不与你分享你的完整代码。但是您可以尝试更改JQuery版本。它可能会导致问题。 –
编辑后的第一篇文章，请找到完整的代码 –