利用JQUERY,菜單伸縮效果未顯示
以下是代碼,跟著視頻敲的,但是瀏覽器沒(méi)有伸縮效果出來(lái),想請(qǐng)教一下是哪里出了問(wèn)題,謝謝。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ? ?
<html xmlns="http://www.w3.org/1999/xhtml"> ? ?
<head> ? ?
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ? ?
<title>利用JQUERY來(lái)實(shí)現(xiàn)菜單水平伸縮</title> ? ?
<style type="text/css"> ? ?
*{margin:0; padding:0; font-size:14px;} ? ?
a{color:#333; text-decoration:none} ? ?
.nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;} ? ?
.nav li{float:left} ? ?
.nav li a{display:block; height:30px;text-align:center; line-height:30px; width:120px; margin-left:1px;background: grey;} ? ?
.nav li a.on, .nav li a:hover{color:#fff;background: #f60;} ? ?
</style> ? ?
<script type="text/javascript" src="jquery.js"> ? ?
$(function(){ ? ?
$('a').hover( ? ?
function() { ? ?
$(this).stop().animate({"width":"160px"},200); ? ?
}, ? ?
function(){ ? ?
$(this).stop().animate({"width":"120px"},200); ? ?
} ? ?
) ? ?
}) ? ?
</script> ? ?
</head> ? ?
<body> ? ?
<ul class="nav"> ? ?
<li><a class="on" href="#">首 頁(yè)</a></li> ? ?
<li><a href="#">新聞快訊</a></li> ? ?
<li><a href="#">產(chǎn)品展示</a></li> ? ?
<li><a href="#">售后服務(wù)</a></li> ? ?
<li><a href="#">聯(lián)系我們</a></li> ? ?
</ul> ? ?
</body> ? ?
2016-08-30
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script>
$(function(){
??? $(".nav>li").hover(
??????? function(){
??????????? $(".subNav",this).animate({height:"120px"},200)
??????? },
??????? function(){
??????????? $(".subNav",this).animate({height:"0px"},200)
??????? }
??? )
})
2016-07-25
應(yīng)該是你沒(méi)有引入正確的JQ庫(kù)