javascript手風琴下拉菜單實現代碼
編輯：關於JavaScript
手風琴下拉菜單實現的效果更靈活，不同與傳統的下拉菜單，本文就為大家分享一段javascript手風琴下拉菜單實現代碼，先看一看效果圖：
具體的javascript手風琴下拉菜單代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>手風琴下拉菜單效果</title>
<script src="js/jquery-1.11.1.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.nav ul{
display: none;
}
.nav ul li{
width: 100px;
text-align: center;
cursor: pointer;
}
.nav div{
background: #4ecc70;
width: 100px;
border-radius: 10px;
line-height: 34px;
text-align: center;
color: white;
cursor: pointer;
}
.demo{
/* display: none;*/
}
.red{
background:red;
border-radius: 10px;
}
</style>
<script>
$(function(){
//case 1
// $('.nav div').on('click',function(){
// if(false==$(this).next().is(':visible')){
// $('.nav ul').slideUp(300);
// }
// $(this).next().slideToggle(300);
// })
//case 2
var changeType=$('.nav').find('div');
$.each(changeType,function(){
$(this).on('click',function(){
if(false==$(this).next().is(':visible')){
$('.nav ul').slideUp(300);
}
$(this).next().slideToggle(300);
})
$('.nav ul:eq(0)').show();
})
var hoverType=$('.nav .u').find('li')
$.each(hoverType,function(){
$(this).hover(function(){
$(this).addClass('red').siblings().removeClass('red');
})
})
})
</script>
</head>
<body>
<ul class="nav">
<li>
<div>水果</div>
<ul class="u">
<li>香蕉</li>
<li>橘子</li>
<li>梨子</li>
<li>西瓜</li>
</ul>
</li>
<li>
<div>蔬菜</div>
<ul class="u">
<li>芹菜</li>
<li>黃瓜</li>
<li>洋蔥</li>
<li>西瓜</li>
</ul>
</li>
<li>
<div>肉類</div>
<ul class="u">
<li>雞肉</li>
<li>兔肉</li>
<li>鴨肉</li>
<li>龍肉</li>
</ul>
</li>
</ul>
</body>
</html>
以上就是為大家分享的javascript手風琴下拉菜單代碼，希望對大家的學習有所幫助，動手為自己的網站實現手風琴下拉菜單吧！
小編推薦
熱門推薦