折叠式菜单 html,JQuery实现折叠式菜单的详细代码
两种风格：
1：点菜单项，每个子菜单项都可显示
30秦甜甜_实训13-2_2_180701802230_18计算机2班
* {
padding: 0;
margin: 0;
list-style: none;
}
.menu-list {
width: 300px;
margin: 60px auto;
border: 2px solid #bbffff;
}
.menu-head {
background-color: #aaaaff;
text-align: center;
height: 100px;
line-height: 100px;
}
.menu-body>li {
height: 60px;
line-height: 60px;
text-align: center;
}
$(function() {
$(".menu-body").hide().eq(0).show();
$(".menu-head").click(function() {
// 1:
$(this).next().toggle();
// 2:
// $(this).next().show();
});
});
学科
- 语文
- 数学
- 英语
- 体育
水果
- 苹果
- 香蕉
- 草莓
- 西瓜
蔬菜
- 番茄
- 黄瓜
- 生菜
- 茄子
肉类
- 鱼肉
- 鸡肉
- 牛肉
- 猪肉
运行结果图：
2：点菜单项，仅当前子菜单项可显示，其余子菜单隐藏
30秦甜甜_实训13-2_3_180701802230_18计算机2班
* {
padding: 0;
margin: 0;
list-style: none;
}
.menu-list {
width: 300px;
margin: 60px auto;
border: 2px solid #bbffff;
}
.menu-head {
background-color: #aaaaff;
text-align: center;
height: 100px;
line-height: 100px;
}
.menu-body>li {
height: 60px;
line-height: 60px;
text-align: center;
}
$(function() {
$(".menu-body").hide().eq(0).show();
$(".menu-head").click(function() {
// 1：
// $(this).next().toggle();
// 2:
$(this).next().show();
var parentli = $(this).parent();
var lis=parentli.siblings();
lis.children(".menu-body").hide();
});
});
学科
- 语文
- 数学
- 英语
- 体育
水果
- 苹果
- 香蕉
- 草莓
- 西瓜
蔬菜
- 番茄
- 黄瓜
- 生菜
- 茄子
肉类
- 鱼肉
- 鸡肉
- 牛肉
- 猪肉
运行结果图：
总结
到此这篇关于JQuery实现折叠式菜单的详细代码的文章就介绍到这了,更多相关jquery 折叠式菜单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
折叠式菜单 html,JQuery实现折叠式菜单的详细代码相关推荐
- html 公告栏 上下滚动,jquery实现上下滚动公告栏详细代码
之前做项目的时候,一直都想着做一个上下滚动的公告栏,作为展示网站的最新公告信息,因为刚开始自己的思路并不是太清晰,在网上找了很多的源码,但是却发现都不能让自己满意,有的还会出现一些小问题,比如,有时候 ...
- 使用jQuery创建折叠式菜单（手风琴效果）
使用jQuery创建折叠式菜单(手风琴效果) 今天给大家介绍如何使用jQuery创建折叠式菜单,即通常所说的手风琴效果(accordion [əˈkɔ:rdiən]). 实现效果如下: 一.HTML代 ...
- 近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）
http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...
- 竖直菜单 html,jQuery实现的网页竖向菜单效果代码
本文实例讲述了jQuery实现的网页竖向菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现竖向的网页菜单代码,可折叠展开的二级网页菜单,修改一下可用在后台管理中,显示在左侧的 ...
- 近20个绚丽实用的jQuery/CSS3侧边栏菜单
jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...
- 19款绚丽实用的jQuery/CSS3侧边栏菜单
jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...
- jQuery 分类导航菜单条点击变色
JQuery 分类导航菜单条点击变色,当点击导航菜单则当前点击选中导航菜单变色其它还原,依次类推. <script type="text/javascript" src=&q ...
- css3+jQuery制作导航菜单（带动画效果）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...
- 15个精心挑选的 jQuery 下拉菜单制作教程
下拉菜单是网站导航常用的表现形式之一,能够呈现更多的导航内容.如果网站能够设计出有吸引力的网站导航,将会吸引更多的用户去浏览网站的内容.今天本文就为大家挑选了25个非常好的 jQuery 下拉菜单制作 ...
最新文章
- 通信网络设计(最小生成树+图的联通）
- 浅谈C#中常见的委托Func,Action,Predicate（转）
- 大山深处，有一所希望学校
- 配置 --- vscode中react格式化解决方案
- 实现链栈的各种基本运算的算法_LeetCode基础算法题第78篇：如何不用加减号实现两数的加法运算？...
- C++ const限定符和auto类型说明符
- 被单位开除、摆地摊、住酒店带脸盆被褥，还你一个真实的陈景润
- 监测到本计算机上装有sql,检测局域网电脑是否有安装SQL Server数据库
- CSS 画一条横线/竖线
- Activiti6自学之路（一）—— Activiti6介绍
- xcode 5中调试技巧
- 基于SSM的境外电商后台管理系统（含word论文文档）
- 运放做跟随器有什么要求
- 有道云笔记 markdown html,有道云笔记Markdown之甘特图
- Android流式布局控件
- 计算机网络物理层之信道与信道容量
- ElasticSearch使用学习
- 51Nod1123 X^A Mod B 数论 中国剩余定理 原根 BSGS
- nacos的feign报错Error creating bean with name ‘configurationPropertiesBeans‘ defined in class path reso
- IOC原理基本使用(一)