javascript手风琴下拉菜单实现代码
作者：浮世微凉 发布时间：2024-06-20 19:18:32
标签：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>
0
投稿猜你喜欢
- 很多时候我们都需要了解下python中导入包的属性方法信息，当然dir 是最便捷的了，不过如果想知道特定的，例如以_ 开头的属性，需要写个筛
- 函数是有组织的，可重复使用的代码，用于执行一个单一的，相关的动作的块。函数为应用程序和代码重用的高度提供了更好的模块。正如我们知
- 好几年前我在做一些自动化的脚本时，脑子里也闪过这样的想法：能不能直接把浏览器的cookies取出来用呢？直到昨天看到代码《python模拟发
- 工欲善其事,必先利其器.python是解释型的语言,但是在windows下如果要执行程序的话还得加个python shell的话,
Python最基本的数据结构是序列(列表/元组)。一个序列中的每个元素都分配有一个数字- 它的位置或索引。第一个索引是0，第二个- 将try except中捕获到的异常信息输出到日志文件中，方便查找错误原因，tranceback模块提供了把详细出错堆栈信息格式化成字符串返
- 一、条件判断语句条件判断语句主要就三个关键字：if 、elif、else这三个关键字可以有多种不同的组合。1、单纯的if语句只有一个 if
- Go 程序运行时，有些场景下会导致进程进入某个“高点”，然后就再也下不来了。比如，多年前曹大写过的一
- python对多国语言的处理是支持的很好的，它可以处理现在任意编码的字符，这里深入的研究一下python对多种不同语言的处理。有一点需要清楚
- 当来自应用程序的第一个连接控制锁而第二个连接需要相冲突的锁类型时，将发生阻塞。其结果是强制第二个连接等待，而在第一个连接上阻塞。不管是来自同
- 目录图像翻转图像轮廓排序图像轮廓排序颜色识别基础颜色识别根据BGR获取HSV阈值编辑器图像翻转使用Python的一个包，imutils。使用
- 一个是没有对输入的数据进行过滤（过滤输入），还有一个是没有对发送到数据库的数据进行转义（转义输出）。这两个重要的步骤缺一不可，需要同时加以特
- 这节介绍接口测试工具postman的基本使用方法， 测试系统就是2.8节自己开发的具有用户增删改查操作的web应用程序——[FirstJav
- 这篇博客对于考公人或者其他用华图或者粉笔做题的人比较友好，通过输入网址可以自动化获取华图以及粉笔练习的错题。粉笔网站我们从做过的题目组中获取
- 本文实例讲述了PHP观察者模式原理与简单实现方法。分享给大家供大家参考，具体如下：当一个对象状态发生改变后，会影响到其他几个对象的改变，这时
- 在我们做搜索的时候经常要用到模糊查询 (注:其中name1,name2,name3,name4为数据库字段) 1.方法 sql="
- 感觉上次写的植物大战僵尸与俄罗斯方块的反应还不错，这次这个文章就更有动力了这次就写一个天天酷跑吧写出来的效果图就是这样了下面就更新一下全部的
- 前几天有一个需求，透视表中的年级这一列要按照一年级，二年级这样的序列进行排序，但是用过透视表的人都知道，透视表对中文的排序不是太理想，放弃p
- 在前面的文章 Python 计算机视觉（十五）—— 图像特效处理 中我已经介绍了大部分的图像的特效处理，但还是忽略了油画特效的处理，在本篇文
- eval前言In [1]: eval("2+3")Out[1]: 5In [2]: eval('[x for x
