为什么，甚至在应用java脚本函数后停止鼠标悬停在小窗口中 它不工作？甚至当我点击菜单时它的背景颜色变为黑色。每件事看起来都很好仍然没有用？
的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kewaunee</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- bootstarp css-->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- userdefined css -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<!-- jquery file-->
<script src="assets/js/jquery.js"></script>
<!-- bootstarp js-->
<script src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="myscript.js"></script>
<style>
.navbar{
background-color: #3366cc;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="kewaunee.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Home<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">home 1</a></li>
<li><a href="#">home2</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Master<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Add Region</a></li>
<li><a href="#">Add Tax</a></li>
<li><a href="#">Add Milestone</a></li>
<li><a href="#">Add Customer</a></li>
</ul>
</li>
<li><a href="#">Transaction</a></li>
<li><a href="#">Report</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- Trigger the modal with a button -->
<li><a data-toggle="modal" href="#myModal"><span class="glyphicon glyphicon-log-in" ></span> Login</a></li>
<!-- modal login form -->
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
</div>
<div class="modal-body">
<form role="form" method="post" action="#">
<div class="form-group-sm" class="col-xs-2">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group-sm" class="col-xs-2">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<a href="#">Forgot password</a>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
<!--end of login form -->
</ul>
</div>
</div>
</nav>
<div class="container-fluid text-center">
<div class="row content">
<div class="col-sm-2 sidenav">
<p class="well"><a href="#">Master</a></p>
<p class="well"><a href="#">Transaction</a></p>
<p class="well"><a href="#">Report</a></p>
</div>
<div class="col-sm-8 text-left">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr>
<h3>Test</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-2 sidenav">
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>© Kewaunee 2015</p>
</footer>
</body>
</html>
myscript.js
$(document).ready(function() {
if ($(window).width() > 768) {
$('.dropdown').on('mouseover', function(){
$('.dropdown-toggle', this).next('.dropdown-menu').show();
}).on('mouseout', function(){
$('.dropdown-toggle', this).next('.dropdown-menu').hide();
});
}
else {
$('.dropdown').off('mouseover').off('mouseout');
}
$('.dropdown-toggle').click(function() {
if ($(this).next('.dropdown-menu').is(':visible')) {
window.location = $(this).attr('href');
}
});
});
myscript.css
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
background-color: #3366cc;
}
.navbar.navbar-inverse{
position: relative;
top: 20px;
}
.navbar-brand{
padding-top: 5px;
}
.navbar-header
{
height:100%;
}
.navbar-inverse .navbar-nav>li>a
{
color: white;
}
.navbar-inverse .navbar-nav .dropdown>a:hover
{
background-color: red;
}
.dropdown:hover .dropdown-menu
{
background-color:#3366cc;
border: 1px solid blue;
}
.dropdown .dropdown-menu a
{
color: white;
}
.dropdown .dropdown-menu a:hover
{
background-color: red;
color: white;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content
{
height: 500px;
}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Dropdown menu*/
.caret-up {
width: 0;
height: 0;
border-left: 4px solid rgba(0, 0, 0, 0);
border-right: 4px solid rgba(0, 0, 0, 0);
border-bottom: 4px solid;
display: inline-block;
margin-left: 2px;
vertical-align: middle;
}
/* Set black background color, white text and some padding */
footer {
background-color: #3366cc;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
.modal-body{
height: 200px;
}
</style>
答案 0 :(得分：0)
对我来说，这似乎工作正常，但如果你想要的效果不仅仅是页面刷新，你可以除了$（document）.ready（）之外还使用$（window）.resize（）