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实现折叠、展开的菜单组效果代码，包括了jQuery实现折叠、展开的菜单组效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现折叠、展开的菜单组效果代码。分享给大家供大家参考。具体如下： 这是一款jQuery实现的漂亮的竖向折叠菜单组，初次运行的时候请刷新一下页面，让jQ载入，这款菜单应用广泛，可用到后台左侧，网站前台也可以用，发现自腾讯微博开放
-
本文向大家介绍JS实现的竖向折叠菜单代码，包括了JS实现的竖向折叠菜单代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现的竖向折叠菜单代码。分享给大家供大家参考，具体如下： 先来看看运行效果截图： 在线演示地址如下： http://demo.jb51.net/js/2015/js-hxzd-menu-demo/ 具体代码如下： 希望本文所述对大家JavaScript程序设计有所帮
-
本文向大家介绍基于jQuery实现简单的折叠菜单效果，包括了基于jQuery实现简单的折叠菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JQuery实现简单的折叠菜单效果代码。分享给大家供大家参考。具体如下： 运行效果截图如下： Html代码如下： 插件实现代码如下： 这里就不作讲解了，注释都写明了。 示例DEMO如下： 希望本文所述对大家学习jquery程序设计有所帮助。
-
本文向大家介绍基于jQuery实现左侧菜单栏可折叠功能，包括了基于jQuery实现左侧菜单栏可折叠功能的使用技巧和注意事项，需要的朋友参考一下 今天给大家介绍一下左侧菜单栏可折叠功能，在后台管理中左侧菜单折叠功能是特别常见的一个功能，基本不管是什么类型的管理后台都会涉及到这个功能的实现。 今天给大家介绍的是二级可折叠菜单的功能，相对一级的菜单折叠功能就显得稍微比较复杂一点了，我这里将给大家介绍菜单
-
本文向大家介绍AngularJS折叠菜单实现方法示例，包括了AngularJS折叠菜单实现方法示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了AngularJS折叠菜单实现方法。分享给大家供大家参考，具体如下： 更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结
-
本文向大家介绍JS+CSS实现的竖向简洁折叠菜单效果代码，包括了JS+CSS实现的竖向简洁折叠菜单效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS+CSS实现的竖向简洁折叠菜单效果代码。分享给大家供大家参考，具体如下： 这是一款JS+CSS竖向简洁的折叠菜单，支持三级分类，红色垂直型，个人感觉非常棒，希望大家喜欢。 运行效果截图如下： 在线演示地址如下： http://demo