导航栏jQuery不起作用

CyborgCommunist 发表于 Dev

电子人共产主义者

我是一个学习一些基本HTML编码的学生，因此我决定使用一个简单的JavaScript导航栏，以便下拉菜单具有一定的动画速度。

导航栏以前可以正常工作，但是在添加了我的图像滑块后，它停止了工作。

谢谢您的帮助！

// JavaScript NavBar
    $( document ).ready(function() {
    $('#navbar ul li ul').hide().removeClass('fallback');
    
    $('#navbar ul li').mouseenter(function () {
        $('#navbar ul', this).stop().slideDown(500);
      });
    $('#navbar ul li').mouseleave(function () {
        $('#navbar ul', this).stop().slideUp(100);
      });
    });

* {
    	margin:0;
    	padding:0;
    }
    
    body{
    	background:url(../images/subtle_white_mini_waves.png) repeat;
    	font-family:Tahoma, Geneva, sans-serif;
    	color: white;
    }
    
    #navbar{
    	margin-left:-400px;
    	position:absolute;
    	left:50%;
    }
    
    #navbar a{
    	text-decoration:none;
    }
    	
    .button{
    	background:url(../images/navbarbutton.png);
    	margin-top: 66px;
    	width: 170px;
    }
    
    .button:hover{
    	background:#e6e6e6;
    }
    
    .button a{
    	padding: 34px 0px;
    }
    
    #navbar ul{
    	text-align:center;
    }
    
    #navbar ul li{
    	float: left;
    	display: inline;
    	font-size:16px;
    	height:89px;
    }
    
    #navbar ul li:hover{
    	background:#E6E6E6;
    }
    
    #navbar ul li a{
    	display:block;
    	color: #444;
    }
    
    #navbar ul li ul{
    	position:absolute;
    	width: 170px;
    	background:#fff;
    }
    
    #navbar ul li ul li{
    	width: 170px;
    	
    }
    
    #navbar ul li ul li a{
    	display:block;
    	padding: 15px 0px 15px 0px;
    	color: #444;
    	font-size: 14px;
    }
    
    #navbar ul li ul li:hover a{
    	background:#f7f7f7;
    }
    
    #navbar ul li ul.fallback{
    	display:none;
    }
    
    #navbar ul li:hover ul.fallback{
    	display:block;
    }
    
    .shadows{
    	position:absolute;
    	z-index:10;
    }
    
    #shadowtopleft{
    	margin-left:4.6875%;
    	margin-right:140px;
    	float:left;
    }
    
    #shadowtopright{
    	float:left;
    }
    
    #shadowbottomleft{
    	margin-top: 83px;
    	margin-left:4.6875%;
    	margin-right:140px;
    	float:left;
    }
    
    #shadowbottomright{
    	margin-top: 83px;
    	float:left;
    }
    
    .banner {
    	z-index:-1;
        position: relative;
        width: 100%;
        overflow: auto;
        padding: 0px;
        margin: 0px;
    }
    
    .banner ui{
    	list-style:none;
        padding: 0px;
        margin: 0px;
    }
    
    .banner ul li {
    	display:block;
        float:left;
        padding: 0px;
        margin: 0px;
    	min-height:500px;
    }

    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Beyond - Home</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="scripts/NavBar.js"></script>
    <script src="scripts/unslider.min.js"></script>
    </head>
    
    <body>
    <!--NavBar start-->
    <div id="navbar">
    	<ul>
        	<li class="button"><a href="#">Programmes</a>
            	<ul class="fallback">
                	<li><a href="#">Problem De-esclation</a></li>
                	<li><a href="#">Family Strengthening</a></li>
                	<li><a href="#">Community Integration</a></li>
                	<li><a href="#">Support Programmes</a></li>
                </ul>
            </li>
            <li class="button"><a href="#">How You Can Help</a>
            	<ul class="fallback">
                	<li><a href="#">Donate</a></li>
                	<li><a href="#">Volunteer</a></li>
                	<li><a href="#">Sponsor</a></li>
                	<li><a href="#">Partner</a></li>
                    <li><a href="#">Join The Staff</a></li>
                </ul>
            </li>
            <li>
            	<div id="logo">
    				<a href="index.html"><img src="images/logo.png" width="140" height="225" alt="Beyond - Logo"></a>
        		</div>
            </li>
            <li class="button"><a href="#">About Beyond</a>
            	<ul class="fallback">
                	<li><a href="#">Our board</a></li>
                    <li><a href="#">News and Views</a></li>
                </ul>
            </li>
            <li class="button"><a href="#">Contact Us</a>
            	<ul class="fallback">
                	<li><a href="#">Facilities</a></li>
                    <li><a href="#">Feedback</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <!--NavBar end-->
    <!--Shadows start-->
    <div class="shadows">
    	<div id="shadowtopleft">
    	<img src="images/shadowtopleft.png" width="520" height="66">
    	</div>
    	<div id="shadowtopright">
    	<img src="images/shadowtopright.png" width="520" height="66">
    	</div>
    	<div id="shadowbottomleft">
    	<img src="images/shadowbottomleft.png" width="520" height="13">
    	</div>
    	<div id="shadowbottomright">
    	<img src="images/shadowbottomright.png" width="520" height="13">
    	</div>
    </div>
    <!--Shadows end-->
    <!--Unslider start-->
    <div class="banner">
        <ul>
            <li><img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg"></li>
            <li><img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg"></li>
            <li><img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg"></li>
        </ul>
    </div>
    <script>
    $( document ).ready(function() {
    		$('.banner').unslider({
    	speed: 500,               //  The speed to animate each slide (in milliseconds)
    	delay: 3000,              //  The delay between slide animations (in milliseconds)
    	complete: function() {},  //  A function that gets called after every slide animation
    	keys: true,               //  Enable keyboard (left, right) arrow shortcuts
    	dots: true,               //  Display dot navigation
    	fluid: false              //  Support responsive design. May break non-responsive designs
    		});
    	});
    </script>
    <!--Unslider end-->
    
    </body>
    </html>

卢克·希姆库斯（Luke Shimkus）

由于您是学生，因此可能没有听说过z-indexstyle属性。z-index属性指定元素的堆栈顺序，尤其是在您使用position: absolute;大量元素的情况下。

因此，您的菜单菜单#navbar在那里。它只是隐藏在其他元素下，因此您可能需要向代码中添加z-index样式，如下所示：

#navbar {
   margin-left: -400px;
   position: absolute;
   left: 50%;
   z-index: 100;
}

我还以为在您的CSS代码中提到了一个小错误：

.banner ui{
    list-style:none;
    padding: 0px;
    margin: 0px;
}

应该：

.banner ul {
    list-style:none;
    padding: 0px;
    margin: 0px;
}

我合并了答案，并将其放入下面的代码段中。

// JavaScript NavBar
$(document).ready(function() {
  $('#navbar ul li ul').hide().removeClass('fallback');

  $('#navbar ul li').mouseenter(function() {
    $('#navbar ul', this).stop().slideDown(500);
  });
  $('#navbar ul li').mouseleave(function() {
    $('#navbar ul', this).stop().slideUp(100);
  });
});

* {
  margin: 0;
  padding: 0;
}
body {
  background: url(../images/subtle_white_mini_waves.png) repeat;
  font-family: Tahoma, Geneva, sans-serif;
  color: white;
}
#navbar {
  margin-left: -400px;
  position: absolute;
  left: 50%;
  z-index: 100;
}
#navbar a {
  text-decoration: none;
}
.button {
  background: url(../images/navbarbutton.png);
  margin-top: 66px;
  width: 170px;
}
.button:hover {
  background: #e6e6e6;
}
.button a {
  padding: 34px 0px;
}
#navbar ul {
  text-align: center;
}
#navbar ul li {
  float: left;
  display: inline;
  font-size: 16px;
  height: 89px;
}
#navbar ul li:hover {
  background: #E6E6E6;
}
#navbar ul li a {
  display: block;
  color: #444;
}
#navbar ul li ul {
  position: absolute;
  width: 170px;
  background: #fff;
}
#navbar ul li ul li {
  width: 170px;
}
#navbar ul li ul li a {
  display: block;
  padding: 15px 0px 15px 0px;
  color: #444;
  font-size: 14px;
}
#navbar ul li ul li:hover a {
  background: #f7f7f7;
}
#navbar ul li ul.fallback {
  display: none;
}
#navbar ul li:hover ul.fallback {
  display: block;
}
.shadows {
  position: absolute;
  z-index: 10;
}
#shadowtopleft {
  margin-left: 4.6875%;
  margin-right: 140px;
  float: left;
}
#shadowtopright {
  float: left;
}
#shadowbottomleft {
  margin-top: 83px;
  margin-left: 4.6875%;
  margin-right: 140px;
  float: left;
}
#shadowbottomright {
  margin-top: 83px;
  float: left;
}
.banner {
  z-index: -1;
  position: relative;
  width: 100%;
  overflow: auto;
  padding: 0px;
  margin: 0px;
}
.banner ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
.banner ul li {
  display: block;
  float: left;
  padding: 0px;
  margin: 0px;
  min-height: 500px;
}

<!doctype html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Beyond - Home</title>
  <link href="css/styles.css" rel="stylesheet" type="text/css">
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="scripts/NavBar.js"></script>
  <script src="scripts/unslider.min.js"></script>
</head>

<body>
  <!--NavBar start-->
  <div id="navbar">
    <ul>
      <li class="button"><a href="#">Programmes</a>
        <ul class="fallback">
          <li><a href="#">Problem De-esclation</a>
          </li>
          <li><a href="#">Family Strengthening</a>
          </li>
          <li><a href="#">Community Integration</a>
          </li>
          <li><a href="#">Support Programmes</a>
          </li>
        </ul>
      </li>
      <li class="button"><a href="#">How You Can Help</a>
        <ul class="fallback">
          <li><a href="#">Donate</a>
          </li>
          <li><a href="#">Volunteer</a>
          </li>
          <li><a href="#">Sponsor</a>
          </li>
          <li><a href="#">Partner</a>
          </li>
          <li><a href="#">Join The Staff</a>
          </li>
        </ul>
      </li>
      <li>
        <div id="logo">
          <a href="index.html">
            <img src="images/logo.png" width="140" height="225" alt="Beyond - Logo">
          </a>
        </div>
      </li>
      <li class="button"><a href="#">About Beyond</a>
        <ul class="fallback">
          <li><a href="#">Our board</a>
          </li>
          <li><a href="#">News and Views</a>
          </li>
        </ul>
      </li>
      <li class="button"><a href="#">Contact Us</a>
        <ul class="fallback">
          <li><a href="#">Facilities</a>
          </li>
          <li><a href="#">Feedback</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <!--NavBar end-->
  <!--Shadows start-->
  <div class="shadows">
    <div id="shadowtopleft">
      <img src="images/shadowtopleft.png" width="520" height="66">
    </div>
    <div id="shadowtopright">
      <img src="images/shadowtopright.png" width="520" height="66">
    </div>
    <div id="shadowbottomleft">
      <img src="images/shadowbottomleft.png" width="520" height="13">
    </div>
    <div id="shadowbottomright">
      <img src="images/shadowbottomright.png" width="520" height="13">
    </div>
  </div>
  <!--Shadows end-->
  <!--Unslider start-->
  <div class="banner">
    <ul>
      <li>
        <img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg">
      </li>
      <li>
        <img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg">
      </li>
      <li>
        <img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg">
      </li>
    </ul>
  </div>
  <script>
    $(document).ready(function() {
      $('.banner').unslider({
        speed: 500, //  The speed to animate each slide (in milliseconds)
        delay: 3000, //  The delay between slide animations (in milliseconds)
        complete: function() {}, //  A function that gets called after every slide animation
        keys: true, //  Enable keyboard (left, right) arrow shortcuts
        dots: true, //  Display dot navigation
        fluid: false //  Support responsive design. May break non-responsive designs
      });
    });
  </script>
  <!--Unslider end-->

</body>

</html>