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>