摘要：主要用到學到的jQuery動畫顯示隱藏效果功能// hide 隱藏// show 顯示// toggle 顯示隱藏切換 效果為左右// slideDown 向下顯示// slideUp 向上隱藏// slideToggle 顯示隱藏切換 效果為上下用jQuery獲取到元素 設置鼠標移進移出的函數(shù)在函數(shù)內(nèi)設置顯示隱藏切換的效果。<!DOCTYPE html> <html&
主要用到學到的jQuery動畫顯示隱藏效果功能
// hide 隱藏
// show 顯示
// toggle 顯示隱藏切換 效果為左右
// slideDown 向下顯示
// slideUp 向上隱藏
// slideToggle 顯示隱藏切換 效果為上下
用jQuery獲取到元素 設置鼠標移進移出的函數(shù)
在函數(shù)內(nèi)設置顯示隱藏切換的效果。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0;list-style: none;}
.wrap{
width: 1000px;
height: 60px;
background-color: #A9A9A9;
margin: 0 auto;
text-align: center;
}
#box1{
/*background-color: black;*/
}
#box1 li{
float: left;
width: 100px;
height: 60px;
line-height: 60px;
position: relative;
}
.box2{
display: none;
background-color: #A9A9A9;
position: absolute;
}
.box2 li{
/*float: none;*/
height: 30px;
line-height: 30px;
/*width: 100px;*/
}
#box1 li:hover{
background-color: lightseagreen;
}
</style>
</head>
<body>
<div class="wrap">
<ul id="box1">
<li>首頁</li>
<li onmousedown="">新聞
<ul class="box2">
<li>新聞1</li>
<li>新聞2</li>
<li>新聞3</li>
<li>新聞4</li>
<li>新聞5</li>
</ul>
</li>
<li>產(chǎn)品
<ul class="box2">
<li>產(chǎn)品1</li>
<li>產(chǎn)品2</li>
<li>產(chǎn)品3</li>
<li>產(chǎn)品4</li>
<li>產(chǎn)品5</li>
</ul>
</li>
<li>關于</li>
</ul>
</div>
<script src="jquery-3.4.0.js"></script>
<script>
$("#box1 li").hover(function(){
$(this).children("ul").slideToggle(300);
// this.style.backgroundColor = 'lightseagreen';
},function () {
// this.style.backgroundColor = '';
$(this).children("ul").slideToggle(300);
});
// hide 隱藏
// show 顯示
// toggle 顯示隱藏切換 效果為左右
// slideDown 向下顯示
// slideUp 向上隱藏
// slideToggle 顯示隱藏切換 效果為上下
</script>
</body>
</html>
批改老師：查無此人批改時間：2019-05-20 09:24:26
老師總結(jié)：完成的不錯。jq比js簡單很多，多練習，jq可以代替js操作。繼續(xù)加油。