一个jquery 折叠式效果

最新推荐文章于 2020-06-09 08:21:46 发布
最新推荐文章于 2020-06-09 08:21:46 发布
阅读量74 收藏
点赞数
分类专栏： jquery专区 文章标签： jQuery ViewUI

这个费了很大的劲才写出来的，算是一个很完美的效果了。终于有几天的功劳动有成果了。

tangdonnaui
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery制作折叠式菜单（Accordion）
杨文的专栏（南京Java讲师）
06-12 1230
1. 制作折叠式菜单（Accordion） 折叠式菜单是和Tab面板一样流行的高级网页元素，它是一种二级菜单，当点击某个主菜单项时，就会以滑动的方式展开它下面的二级菜单，同时自动收缩隐藏其他主菜单项的二级菜单，如图所示。因此折叠式菜单有一个很好听的英文名叫“Accordion”（手风琴），它的折叠方式是不是有点像在拉手风琴呢？                 "text
JQuery实现-展开折叠效果
fengxue_snow的博客
07-31 7114
JQ实现-展开折叠查看全部 1.默认情况下，第五条之后的内容被隐藏； 2.点击展开时，全部显示，并给品牌0、品牌5字体改为红色。 默认显示为折叠状态： 展开状态： 代码： <style> /*common css begin*/ *{margin:0px;padding:0px;} body{font-family: 微软雅黑,Microsoft yahei,Ar...
可折叠内容块 data-role="collapsible"
梦想天空
07-16 1186
可折叠内容块 data-role="collapsible" 要创建内容折叠块。首先，创建一个容器，并添加 data-role="collapsible" 属性。并且给此容器使用 data-content-theme 属性，为可折叠的内容块，进行主题样式设计。 其次，在容器中，添加任何头部区域的标题（h1-h6）或图例元素(egend element)。JQuery Mobile框架...
一款由css3和jquery实现的卡面折叠式菜单
weixin_34235371的博客
09-16 104
之前已经为大家介绍了好多导航菜单。今天为大家再带来一款由css3和jquery实现的卡片折叠式菜单。当菜单关闭的时候，有三维堆叠的效果。我们一起看下效果图：   在线预览   源码下载   html代码： &lt;div id="wrapper"&gt; &lt;h1&gt; &lt;i class="icon-sort-by-att...
使用jQuery创建折叠式菜单（手风琴效果）
热门推荐
hanhf的专栏
07-18 1万+
使用jQuery创建折叠式菜单（手风琴效果） 　　今天给大家介绍如何使用jQuery创建折叠式菜单，即通常所说的手风琴效果（accordion [əˈkɔ:rdiən]）。 　　实现效果如下： 一、HTML代码结构 　　要实现折叠式菜单，代码相当简单，如下所示： &lt;ul class="accordion"&gt; &lt;li class="selec...
jquery实现折叠式（手拉风琴）菜单
sui_s的专栏
01-27 1448
先贴个效果图，目前测试过的浏览器：IE8及以上，chrome，Firefox，360运行通过 dom结构： 主菜单1 主菜单2
jQuery 双层折叠特效
L_melody的博客
06-09 233
jQuery 双层折叠特效： （效果图如下：） <style type="text/css"> .top{ width:100%; height:50px; background:#645244; margin:0 auto; position:relative;} .top .open{ position:absolute; top:9px; right:20px; color:#fff; border:2px solid #fff; border-radius:50%;-we.
jQuery折叠式楼层菜单特效代码
03-20
【jQuery折叠式楼层菜单特效代码】是一种常见的网页交互设计，用于优化用户体验，使得网站的导航更加直观和便捷。这种特效通常应用于多级分类或者内容丰富的网站，通过折叠和展开的方式，用户可以快速浏览和访问各个...
jQuery动画标签折叠式菜单
04-02
总之，jQuery动画标签折叠式菜单是提升网站用户体验的有效手段，它利用jQuery的强大功能和易用性，结合动画效果和折叠菜单设计，创造出引人入胜的交互式导航。理解和掌握这些知识点对于任何Web开发人员来说都是必要...
JQuery实现折叠式菜单的详细代码
10-15
折叠式菜单是一种常见的网页交互元素，它允许用户点击一个菜单项后展开或收起其子菜单项，以节省页面空间并提供更好的用户体验。我们将分析提供的代码示例，了解其工作原理，并探讨如何根据需要进行自定义。 首先，...
jQuery创建折叠式菜单
10-16
总的来说，利用 jQuery 创建折叠式菜单是一个既简单又实用的过程，通过结合 HTML 结构、jQuery 事件处理和 CSS 样式，可以轻松实现各种定制化的菜单效果。对于前端开发者来说，掌握这种技术有助于提升网站或应用的...
财务收支管理系统（带对账）Excel模板
07-16
【作品名称】：财务收支管理系统（带对账）Excel模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
人工智能机器学习基础非线性回归
07-16
使用python实现机器学习基础非线性回归
Python编程惯例.md
07-16
python安装
传感器习题集.doc
07-16
传感器
无线多媒体传感器网络论文：基于无线多媒体传感器网络的图像分布式处理技术的研究.doc
07-16
传感器
历年美国总统数据1789-2025年.xlsx
最新发布
07-16
样例数据及详细介绍：https://blog.csdn.net/T0620514/article/details/140477245
中钢集团武汉安全环保研究院考研，41个专业课历年考试真题及答案汇总，备考资料题库笔记，录用名单汇总.pdf
07-16
中钢集团武汉安全环保研究院考研，41个专业课历年考试真题及答案汇总，备考资料题库笔记，录用名单汇总.pdf
jquery折叠式菜单一个菜单项（ul）
05-24
可以使用jQuery的`slideToggle()`方法实现折叠式菜单。 首先，HTML结构中要有一个包含菜单项的`ul`标签，如下所示： ```html <ul class="menu"> <li>菜单项1</li> <li>菜单项2</li> <li class="sub-menu"> <a href="#">菜单项3</a> <ul> <li>子菜单项1</li> <li>子菜单项2</li> <li>子菜单项3</li> </ul> </li> <li>菜单项4</li> </ul> ``` 其中，菜单项3下面有一个子菜单，使用了另一个`ul`标签。菜单项3的`li`标签还加上了一个`sub-menu`的类名，用于后面的CSS样式和jQuery选择器。 接着，在CSS中设置菜单项的样式： ```css .menu li { list-style: none; padding: 10px; background-color: #eee; cursor: pointer; } .sub-menu ul { display: none; } ``` 其中，`.menu li`设置了一些基本样式，`.sub-menu ul`设置了子菜单的初始显示状态为`none`。 最后，在jQuery中实现点击菜单项展开或收起子菜单的效果： ```javascript $(document).ready(function() { $('.sub-menu > a').click(function() { $(this).siblings('ul').slideToggle(); }); }); ``` 其中，`$('.sub-menu > a')`选中菜单项3的`a`标签，`.siblings('ul')`选中它的兄弟`ul`标签（即子菜单），`.slideToggle()`方法实现展开或收起子菜单的效果。 完整示例代码如下： ```html <!DOCTYPE html> <html> <head> <title>折叠式菜单</title> <style> .menu li { list-style: none; padding: 10px; background-color: #eee; cursor: pointer; } .sub-menu ul { display: none; } </style> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function() { $('.sub-menu > a').click(function() { $(this).siblings('ul').slideToggle(); }); }); </script> </head> <body> <ul class="menu"> <li>菜单项1</li> <li>菜单项2</li> <li class="sub-menu"> <a href="#">菜单项3</a> <ul> <li>子菜单项1</li> <li>子菜单项2</li> <li>子菜单项3</li> </ul> </li> <li>菜单项4</li> </ul> </body> </html> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值