JQuery实现折叠式菜单的详细代码
更新时间：2020年06月03日 15:20:42 作者：Q欣慰的三叶草
这篇文章主要介绍了JQuery实现折叠式菜单的详细代码,本文通过实例代码通过两种风格给大家详细介绍，需要的朋友可以参考下
两种风格：
1：点菜单项，每个子菜单项都可显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>30秦甜甜_实训13-2_2_180701802230_18计算机2班</title>
</head>
<style type="text/css">
* {
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;
}
</style>
<script src="../JQuery/jquery.js"></script>
<script>
$(function() {
$(".menu-body").hide().eq(0).show();
$(".menu-head").click(function() {
// 1:
$(this).next().toggle();
// 2:
// $(this).next().show();
});
});
</script>
<body>
<div class="menu-list">
<ul>
<li>
<h2 class="menu-head">学科</h2>
<ul class="menu-body">
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>体育</li>
</ul>
</li>
<li>
<h2 class="menu-head">水果</h2>
<ul class="menu-body">
<li>苹果</li>
<li>香蕉</li>
<li>草莓</li>
<li>西瓜</li>
</ul>
</li>
<li>
<h2 class="menu-head">蔬菜</h2>
<ul class="menu-body">
<li>番茄</li>
<li>黄瓜</li>
<li>生菜</li>
<li>茄子</li>
</ul>
</li>
<li>
<h2 class="menu-head">肉类</h2>
<ul class="menu-body">
<li>鱼肉</li>
<li>鸡肉</li>
<li>牛肉</li>
<li>猪肉</li>
</ul>
</li>
</ul>
</div>
</body>
运行结果图：
2：点菜单项，仅当前子菜单项可显示，其余子菜单隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>30秦甜甜_实训13-2_3_180701802230_18计算机2班</title>
</head>
<style type="text/css">
* {
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;
}
</style>
<script src="../JQuery/jquery.js"></script>
<script>
$(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();
});
});
</script>
<body>
<div class="menu-list">
<ul>
<li>
<h2 class="menu-head">学科</h2>
<ul class="menu-body">
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>体育</li>
</ul>
</li>
<li>
<h2 class="menu-head">水果</h2>
<ul class="menu-body">
<li>苹果</li>
<li>香蕉</li>
<li>草莓</li>
<li>西瓜</li>
</ul>
</li>
<li>
<h2 class="menu-head">蔬菜</h2>
<ul class="menu-body">
<li>番茄</li>
<li>黄瓜</li>
<li>生菜</li>
<li>茄子</li>
</ul>
</li>
<li>
<h2 class="menu-head">肉类</h2>
<ul class="menu-body">
<li>鱼肉</li>
<li>鸡肉</li>
<li>牛肉</li>
<li>猪肉</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
运行结果图：
总结
到此这篇关于JQuery实现折叠式菜单的详细代码的文章就介绍到这了,更多相关jquery 折叠式菜单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
用jquery实现的浮动广告代码,需要的朋友可以参考下。2008-12-12
这篇文章主要为大家详细介绍了jquery.pager.js实现分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
本文给大家分享一款基于jQuery环形图标旋转切换特效。这是一款鼠标点击图标菜单圆形顺时针或者逆时针旋转切换代码。有需要的小伙伴可以参考下。2015-05-05
jQuery Datatables 动态列+跨列合并实现代码
这篇文章主要介绍了jQuery Datatables 动态列+跨列合并实现代码,需要的朋友可以参考下2020-01-01
今天共享一些令人振奋的UI教程，这些UI大部分是基于Jquery的插件，主要包括动态切换视图的相册、3D旋转分享按钮、Facebook admin Panel，下滑效果的导航Menu，滑翔购物车功能，漂亮的Form表单元素等等。2010-09-09
这篇文章主要介绍了JQuery包裹DOM节点的方法,实例分析了wrap与wrapAll方法实现包裹DOM节点的技巧与相关注意事项,需要的朋友可以参考下2015-06-06
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
jQuery模拟百度新闻不间断滚动效果并且支持文字、图片水平垂直滚动等等，感兴趣的朋友可以了解下，或许本文所提供的案例对你学习jquery特效有所帮助,好了话不多说，切入正题2013-02-02
在下面介绍一款jQuery的模板插件 tmpl，是由微软想jQuery官方贡献的模板插件2011-10-10
jquery获取input type=text中的值的各种方式(总结)
下面小编就为大家带来一篇jquery获取input type=text中的值的各种方式(总结)。小编觉的挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
easyui datebox 时间限制，datebox开始时间限制结束时间，datebox截止日期比起始日期大的实现代码
这篇文章主要介绍了easyui datebox 时间限制，datebox开始时间限制结束时间，datebox截止日期比起始日期大的实现代码，需要的朋友参考下吧2017-01-01
最新评论