javascript手风琴下拉菜单实现代码
作者：浮世微凉 时间：2024-06-20 19:18:32
手风琴下拉菜单实现的效果更灵活，不同与传统的下拉菜单，本文就为大家分享一段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,手风琴,下拉菜单
0
投稿猜你喜欢
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2021-11-14 06:16:40
python切割图片的示例
2021-01-10 22:09:12
Python3之乱码\\xe6\\x97\\xa0\\xe6\\xb3\\x95处理方式
2021-03-30 10:19:47
关于python字符串方法分类详解
2023-12-30 22:51:44
pyqt5简介及安装方法介绍
2022-05-21 15:18:53
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2023-11-06 02:16:54
Python实现GUI学生管理系统的示例代码
2022-06-01 01:47:56
Python tkinter实现桌面软件流程详解
2022-03-26 09:51:32
PHP网页游戏学习之Xnova(ogame)源码解读（三）
2024-06-05 15:41:29
Python requests timeout的设置
2022-01-27 01:20:40
Go语言基础函数基本用法及示例详解
2024-05-09 14:57:15
Python淘宝或京东等秒杀抢购脚本实现(秒杀脚本)
2023-01-23 20:25:14
PyTorch中Torch.arange函数详解
2022-04-29 02:30:50
实例：用 JavaScript 来操作字符串(一些字符串函数)
2023-06-30 10:02:21
基于TensorFlow的CNN实现Mnist手写数字识别
2022-03-13 11:20:28
Python fileinput模块应用详解
2021-06-23 14:28:09
Pytorch提取模型特征向量保存至csv的例子
2022-09-28 00:41:17
python函数和python匿名函数lambda详解
2021-08-22 17:57:07
CSS网页布局开发时的常见问题小结
2009-08-13 12:17:00
Python @property及getter setter原理详解
2022-04-25 18:15:09