javascript手風琴下拉菜單實現代碼

2024-05-06 16:25:01

字體：大中小

來源：轉載

供稿：網友

手風琴效果的下拉菜單大家都有見到過吧，實現的方法也有很多，這篇文章就為大家分享了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>