JQuery实现折叠菜单

最新推荐文章于 2022-07-31 17:02:41 发布
最新推荐文章于 2022-07-31 17:02:41 发布
阅读量733 收藏
点赞数
分类专栏： JQuery 文章标签： jQuery CSS HTML XHTML ViewUI 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<style type="text/css">
.menu_list {
	width: 150px;
}
.menu_head {
	padding: 8px 10px;
	cursor: pointer;
	position: relative;
	margin:1px;
    font-weight:bold;
    background: #93cdff;
}
.menu_body {
	display:none;
}
.menu_body a 
{
	padding:8px 0px;
	display:block;
	color:#006699;
	background-color:#EFEFEF;
	 padding-left:10px;
	font-weight:bold;
	text-decoration:none;
}
 .menu_body a:hover {
	color:#7fb2f4;
	background-color:#dfdfdf;
	text-decoration:underline;
}
</style>
<script type="text/javascript">
 $(function(){
            $("#firstpane p.menu_head").click(function()
            {
                $(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");           
            });
            $("#firstpane p.menu_head").mouseover(function()
            {
               $(this).css({background:"#2286c6"});
            });
            $("#firstpane p.menu_head").mouseout(function()
            {
               $(this).css({background:"#93cdff"});
            });
        });s
</script>
</head>

<body>
<div id="firstpane" class="menu_list">
  <p class="menu_head">菜单1</p>
    <div class="menu_body">
	<a href="#">子菜单1</a>
	<a href="#">子菜单2</a>
	<a href="#">子菜单3</a>
    </div>
 <p class="menu_head">菜单2</p>
    <div class="menu_body">
	<a href="#">子菜单1</a>
	<a href="#">子菜单2</a>
	<a href="#">子菜单3</a>
    </div>
<p class="menu_head">菜单3</p>
    <div class="menu_body">
	<a href="#">子菜单1</a>
	<a href="#">子菜单2</a>
	<a href="#">子菜单3</a>
    </div>
<p class="menu_head">菜单4</p>
    <div class="menu_body">
	<a href="#">子菜单1</a>
	<a href="#">子菜单2</a>
	<a href="#">子菜单3</a>
    </div>
</div>
</body>
</html>
彦雷
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
精妙绝伦的jQuery——改进导航：菜单、标签及折叠选项
Arther90的专栏
01-08 3530
一、让页面上所有的链接都在新窗口打开。 html代码：  Yahoohttp://www.yahoo.com">Yahoo>  Googlehttp://www.google.com">Google>  Binghttp://www.bing.com">Bing> 选取#links li元素的后代元素a，然后使用.attr()方法把这些链接元素的target属性设置为_blank
Jquery-UI—制作可折叠面板（accordion）
生如夏花 炫至茶靡
12-09 3001
先来看一下效果： 使用jquery-ui制作如可折叠选项卡非常简单： 第一步：引入 jquery 和 jquery-ui 文件。 注 jquery-ui 要放在jquery引入之后。因为要引入自己的外部样式文件和脚本文件，以下是我的head部分代码。          可折叠面板                     第二步：写面板布局。
jquery折叠菜单、jquery侧边栏菜单、CSS侧边栏菜单
hhhhiiii的博客
02-05 2565
jquery折叠菜单、jquery侧边栏菜单、CSS侧边栏收展、Jquery折叠二级菜
JQuery实现内容折叠面板demo
pikcacho_pkq的博客
07-31 634
折叠面板在前端页面十分常见，本课程将会带领初学者逐步完成一个jQuery内容折叠面板，并且使用jQuery的方法来实现简单的动画。
jquery实现折叠面板
丽丽大神ing的博客
10-25 2647
1.dom元素 <div class="box"> <ul id="ul"> <li>Client agreement <div class="line"></div> <div class="content"> <p>RISK WARNING: Trading leveraged d...
JQuery 实现三级菜单
weixin_46390620的博客
03-09 1121
三级菜单 效果图： 文中所用图片如下： 基本代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>三级菜单</title> </head> <script src="https://cdn.bootcss.c...
jquery/jq实现折叠菜单
m0_53592673的博客
12-23 269
css代码 <style type="text/css"> li{ list-style: none; } .menu>li>ul{ display: none; } h1{ cursor: pointer; } </style> //引入jquery <script src="js/jquery-3.5.1.js" type="text/javascript"></script> h
jquery实现折叠菜单效果【推荐】
10-20
jQuery 是一个广泛使用的JavaScript库，它提供了丰富的API来简化DOM操作、事件处理和动画效果，其中包括实现折叠菜单的功能。本文将深入讲解如何使用jQuery实现折叠菜单效果。 首先，我们要了解折叠菜单的基本原理...
jQuery实现折叠菜单 非常简单
03-16
通过以上步骤，我们就可以创建一个基本的jQuery折叠菜单。然而，根据实际需求，你可能还需要添加更多的定制功能，如过渡动画、自定义样式或响应式设计。总的来说，jQuery提供了一种灵活且高效的方式来实现这种常见的...
JQuery实现折叠式菜单的详细代码
10-15
首先，我们来看第一种风格的折叠式菜单实现。在这个例子中，当用户点击`.menu-head`（即菜单标题）时，与其相邻的`.menu-body`（子菜单列表）会通过`toggle()`函数切换显示状态。`toggle()`函数是JQuery的一个方法，...
jQuery实现的简单折叠菜单(折叠面板)效果代码
11-23
本文实例讲述了jQuery实现的简单折叠菜单(折叠面板)效果代码。分享给大家供大家参考。具体如下： 这是一款基于jQuery实现的折叠菜单，可展开一些内容，实际上称它为一个面板比较好，是一个折叠面板，使用了jQuery1.6.2插件。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/jquery-simple-toggle-zd-menu-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh
jquery实现网页右侧可展开折叠的DIV特效
06-01
1.实现了扇叶左右展开、合并的效果 2.代码清晰、效果炫酷
jQuery 折叠面板
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
10-28 955
手风琴是非常常见而实用的效果，本篇文章示例一个简单的手风琴效果。 上效果图： 源码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
折叠式菜单 html,JQuery实现折叠式菜单的详细代码
weixin_30666427的博客
05-30 1198
两种风格：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: #...
用jquery编写折叠菜单
m0_53911328的博客
05-27 1371
折叠菜单 编写网页，设置CSS完成折叠菜单的结构和样式设置。 通过层级选择器、基本过滤选择器以及查找的方法获取指定的元素对象。 CSS页面代码： <style> *{ margin: 0; padding: 0; } ul li{ list-style: none; } .menu{ width: 150px; margin: 30px 500px; bo.
jquery实现的折叠式菜单（手风琴式菜单）
wangyining070205的博客
04-26 6682
最近学习jquery，从网上找了一段实现折叠式菜单的代码，发现实现的不够理想，整明白后改写了一下。效果如下： 在这里插入代码片<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>折叠式菜单特效</title> <style> * { padding: 0; margin: 0; } ul
Jquery实现的一个DIV层面板的折叠/展开效果
热门推荐
源码好优多
01-08 1万+
Jquery实现的一个DIV层面板的折叠/展开效果_网页代码站(www.webdm.cn) *{margin:0;padding:0;} body { font-size: 14px; line-height: 130%; padding: 60px } #panel { width: 262px; border: 1px solid #0050D0 } .head { paddin
jquery折叠菜单
最新发布
05-26
下面是一个简单的jQuery折叠菜单实现： HTML代码： ```html <li><a href="#">菜单1 <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">子菜单3</a></li> <li><a ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值