Question

我的页面导航栏上有一些下拉菜单，使用bootstrap元素和我自定义的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>&copy; 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;
}

Answer 1

我使用的是错误的尺寸。大小应该是767.

Javascript忽略if窗口大小的语句

1 个答案: