abstract：slideDown()、slideUp()方法用于導航下拉菜單的升降，尤其方便。fadeTo()方法改變區(qū)塊透明度，用來標識鼠標當前所在區(qū)塊代碼如下：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> &nb
slideDown()、slideUp()方法用于導航下拉菜單的升降，尤其方便。
fadeTo()方法改變區(qū)塊透明度，用來標識鼠標當前所在區(qū)塊
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-3.3.1.js"></script>
<style>
*{margin: 0;padding: 0;}
body{background: gray;}
body>ul{width: 450px;margin: 20px auto;}
ul{list-style: none;}
li{width: 150px;height: 30px;text-align: center;}
body>ul>li{float: left;background: darkred;color: white;position: relative;line-height: 30px;}
li>ul{position: absolute;display: none;background: firebrick;}
</style>
</head>
<body>
<ul>
<li>產品
<ul>
<li>水果</li>
<li>花草</li>
<li>蟲魚</li>
</ul>
</li>
<li>新聞
<ul>
<li>國內</li>
<li>國際</li>
<li>本地</li>
</ul>
</li>
<li>關于我們
<ul>
<li>簡介</li>
<li>聯系方式</li>
<li>崗位空缺</li>
</ul>
</li>
</ul>
</body>
<script>
$(function () {
$("li:has(ul)").hover(
function () {
$(this).children('ul').slideDown(100);
},
function () {
$(this).children('ul').slideUp(10);
}
);
$("li>ul>li").hover(
function () {
$(this).fadeTo(200,0.3);
},
function () {
$(this).fadeTo(100,1);
});
});
</script>
</html>效果圖
Correcting teacher：查無此人Correction time：2019-06-17 09:33:04
Teacher's summary：完成的不錯。把常用的函數記住就行了。很少用的，沒必要花心思，用的時候查詢就可以了。繼續(xù)加油。