亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

三級下拉菜單

Original 2018-11-28 21:53:41 180
abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三級下拉框</title> <script type="text/javascript" src="jquery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三級下拉框</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style>
*{margin:0px;padding:0px;}
.menu{
width:760px;
height:50px;
background: pink;
margin:20px auto;
border:1px solid #ccc;
border-radius: 5px;
color:#fff;

}
ul{
list-style: none;
}
ul li{

width:150px;
float:left;
font-size: 25px;
height:50px;
line-height: 50px;
border:1px solid #888;
text-align: center;
cursor: pointer;
}
.two li{
width:150px;
height:40px;
line-height: 40px;
background: pink;
position: relative;
border:1px solid #fff;
font-size:20px;
cursor:pointer;
}
.three{position: absolute;top:0;left:150px;}
.three>li{
width:150px;
height:35px;
line-height: 35px;
background: pink;

}



</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
//隱藏二級與三級下拉菜單
$('.two').hide()
$('.three').hide()
//當(dāng)鼠標(biāo)移動到包含二級菜單的一級菜單時顯示當(dāng)前二級菜單
$('.one>li').mouseover(function(){
$(this).find('.two').slideDown(1000)
})
//當(dāng)鼠標(biāo)移出包含二級菜單的一級菜單時隱藏當(dāng)前二級菜單
$('.one>li').mouseleave(function(){
$(this).find('.two').slideUp(1000)
})
//當(dāng)鼠標(biāo)移動到包含三級菜單的二級菜單時顯示當(dāng)前三級菜單
$('.two_1').mouseover(function(){
$(this).find('.three').slideDown(500)
})
//當(dāng)鼠標(biāo)移出包含三級菜單的二級菜單時隱藏當(dāng)前三級菜單
$('.two_1').mouseleave(function(){
$(this).find('.three').slideUp(500)
})

})

</script>

<div class="menu">
		<ul class="one">    <!--  一級下拉菜單 -->
			<li>首頁</li>
			<li>產(chǎn)品			
				<ul class="two">		<!-- 二級下拉菜單 -->
					<li>產(chǎn)品1</li>
					<li class="two_1">產(chǎn)品2
						<ul class="three">       <!-- 三級下拉菜單 -->
							<li>產(chǎn)品2.1</li>
							<li>產(chǎn)品2.2</li>
							<li>產(chǎn)品2.3</li>
							<li>產(chǎn)品2.4</li>
						</ul>						
					</li>
					<li>產(chǎn)品3</li>
					<li>產(chǎn)品4</li>					
				</ul>
			</li>
			<li>公司新聞
				<ul class="two">
					<li>新聞1</li>
					<li class="two_1">新聞2
						<ul class="three">
							<li>新聞2.1</li>
							<li>新聞2.2</li>
							<li>新聞2.3</li>
							<li>新聞2.4</li>
							
						</ul>
					</li>
					<li>新聞3</li>
					<li>新聞4</li>
				</ul>
			</li>
			<li>行業(yè)新聞</li>
			<li>聯(lián)系我們</li>
			

		</ul>
	</div>
</body>
</html>

在寫二級下拉框的時候要使用相對定位
position:relative;
在寫三級下拉框的時候要使用絕對定位
position:absolute;
mouseover() 當(dāng)鼠標(biāo)指針位于元素上方時會發(fā)生mouseover事件
mouseleave() 當(dāng)鼠標(biāo)指針離開元素時會發(fā)生mouseleave事件
slideDown([speed][fn]) 下滑效果
slideUp([speed][fn])   上滑效果


Correcting teacher:天蓬老師Correction time:2018-11-28 23:59:58
Teacher's summary:jQuery中通過幾個簡單的方法,就可以實現(xiàn)原生js中,需要寫的大量代碼,正好體現(xiàn)了jquery的設(shè)計思想: 寫得少,做得多

Release Notes

Popular Entries