【发布时间】：2017-10-22 06:59:08
【问题描述】：
我的页面导航栏上有一些下拉菜单，它们使用引导元素以及我的自定义 javascript。我有条件只在屏幕宽度大小大于 480（引导的 xs 大小）时运行。问题是脚本在屏幕宽度为 480、低于 480，当然还有 480 时运行。换句话说，由于某种原因，浏览器忽略了在悬停脚本上运行下拉菜单的脚本的条件语句。我的目标是让它只有在导航栏没有折叠时才会发生悬停效果。
Javascript
if ( $(window).width() > 480) {
$('ul.nav li.dropdown').hover(function () {
"use strict";
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
"use strict";
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
}
HTML
<!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">
<title>Made with Love and Sarcasm</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!--Custom theme-->
<link href="css/styles.css" rel="stylesheet">
<link href="css/theme.min.css" rel="stylesheet">
<link href="css/sticky-footer.css" rel="stylesheet">
<script src="https://use.typekit.net/mxj2kia.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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 href="index.html" class="navbar-brand title">
<h1 class="sr-only">Made With Love and Sarcasm</h1>
<img src="img/ggc_logo_larger.png" alt="logo" class="pushup img-responsive img-rounded"></a> </div>
<div id="navbar" class="navbar-collapse collapse">
<form class="form-inline inline" action="">
<!--Make sure to program a search feature here-->
<div class="input-group navbar-btn">
<input type="text" class="form-control" placeholder="Search For" aria-describedby="Placeholder">
<span class="input-group-btn">
<button type="submit" class="btn btn-default" id="search-button"> <span class="glyphicon glyphicon-search"></span> </button>
</span> </div>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="title dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admire<span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="admire menu">
<li><a href="#"><span class="glyphicon glyphicon-scissors"> Outfits</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-cutlery"> Foods</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-sunglasses"> Props</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-star"> Misc</span></a></li>
</ul>
</li>
<li class="title dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Explore<span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="admire menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</li>
<li class="title dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Create<span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="admire menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</li>
</ul>
</div>
<!--/collapse-->
</div>
<!--/container-->
</div>
<!--/navbar-->
<div class="jumbotron placeholder">
<div class="container">
<h1>Place to Put Amazing Photos</h1>
</div>
<!--replace with image-->
</div>
<div class="container">
<div class="row visible-lg visible-md visible-sm">
<div class="col-md-3 visible-md visible-lg"> <a href="#" class="btn btn-primary btn-block btn-lg">Incredible Outfits</a> </div>
<div class="col-md-3 visible-md visible-lg"> <a href="#" class="btn btn-primary btn-block btn-lg">Wonderful Cooking</a> </div>
<div class="col-md-3 visible-md visible-lg"> <a href="#" class="btn btn-primary btn-block btn-lg">Outstanding Props</a> </div>
<div class="col-md-3 visible-md visible-lg"> <a href="#" class="btn btn-primary btn-block btn-lg">Amazing Creations</a> </div>
<div class="col-sm-3 visible-sm"> <a href="#" class="btn btn-primary">Incredible Outfits</a> </div>
<div class="col-sm-3 visible-sm"> <a href="#" class="btn btn-primary">Wonderful Cooking</a> </div>
<div class="col-sm-3 visible-sm"> <a href="#" class="btn btn-primary">Outstanding Props</a> </div>
<div class="col-sm-3 visible-sm"> <a href="#" class="btn btn-primary">Amazing Creations</a> </div>
</div>
<div class="row visible-xs">
<div class="col-xs-6"><a href="#" class="btn btn-primary btn-lg btn-block"><span class="glyphicon glyphicon-scissors"> Outfits</span></a> </div>
<div class="col-xs-6"><a href="#" class="btn btn-primary btn-lg btn-block"><span class="glyphicon glyphicon-cutlery"> Cooking</span></a> </div>
</div>
<br>
<div class="row visible-xs">
<div class="col-xs-6"><a href="#" class="btn btn-primary btn-lg btn-block"><span class="glyphicon glyphicon-sunglasses"> Props</span></a> </div>
<div class="col-xs-6"><a href="#" class="btn btn-primary btn-lg btn-block"><span class="glyphicon glyphicon-star"></span> Creations</a> </div>
</div>
</div>
<div class="footer">
<div class="container">
<p>© 2017 Made With Love and Sarcasm</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<script src="js/function.js" type="text/javascript"></script>
</body>
</html>
自定义 CSS
@charset "utf-8";
/* CSS Document */
h1, h2, h3, h4, h5, h6, h7 {
font-family: vatican;
}
.title {
font-family: vatican;
}
.pushup {
margin-top: -8px;
}
.placeholder {
height: 500px;
}
div.jumbontron h1 {
color: black;
}
.inline {
display: inline-block;
}
【问题讨论】：
标签： javascript jquery html bootstrap-4