0
为什么，即使在应用Java脚本函数停止鼠标悬停在小窗口 它不工作之后？甚至当我点击菜单它的背景颜色变化为black.every东西似乎很好，但它不工作？如何在小窗口中停止鼠标悬停功能？
的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>
当你将鼠标放在什么上时会发生什么...什么是小窗口？ –
每当上的菜单按钮i鼠标悬停它显示dropdrown菜单，但我想，鼠标悬停时选项设置为OFF，每当我们打开一个手机屏幕上，它应该像一个可点击下拉菜单，小窗口装置，如手机屏幕。 @拉胡尔 –
所以尽量要检查设备尺寸的第一页上的负载，然后使用jQuery的应用效果.... –