怎么给div添加按下去效果(DIV点击折叠实例代码)
类别:Web前端 浏览量:2826
时间:2022-01-20 00:57:16 怎么给div添加按下去效果
DIV点击折叠实例代码废话不多说了,关键代码如下所示:
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
- <title>测试</title>
- <style type="text/css">
- *{ margin:0; padding:0;}
- .menu{ width:100%;}
- .menu .item{ width:100%; height:auto; background-color: #fefefe;}
- .menu .item h1{ font-size:15px; width:100%; position:relative;}
- .menu .item h1 i{ display: inline-block; height:15px; width:10px; position:absolute; rightright:10px; top:0; background: url(images/rightright.jpg" alt="怎么给div添加按下去效果(DIV点击折叠实例代码)" border="0" />no-repeat; background-size:10px auto;}
- .menu .item ul{ display: none;}
- .menu .item ul li{ list-style:none; color:#000; background-color: #fefefe; border-bottom:solid 1px #ededed; line-height: 32px; width:100%; position:relative;}
- .menu .item ul li p{ display: none;}
- .menu .item.active h1 i{ display: inline-block; height:10px; width:15px; position:absolute; rightright:10px; top:3px; background: url(images/down.jpg" alt="怎么给div添加按下去效果(DIV点击折叠实例代码)" border="0" />no-repeat; background-size:15px auto;}
- .menu .item ul li span.icon{display: inline-block; height:15px; width:10px; position:absolute; rightright:10px; top:0; background: url(images/rightright.jpg" alt="怎么给div添加按下去效果(DIV点击折叠实例代码)" border="0" />no-repeat; background-size:10px auto;}
- .menu .item ul li.active span.icon{ display: inline-block; height:10px; width:15px; position:absolute; rightright:10px; top:3px; background: url(images/down.jpg" alt="怎么给div添加按下去效果(DIV点击折叠实例代码)" border="0" />no-repeat; background-size:15px auto;}
- .menu .item.active ul{ display: block;}
- .menu .item.active ul li.active p{ display: block;}
- </style>
- </head>
- <body>
- <li class="menu">
- <li class="item">
- <h1>标题一<i></i></h1>
- <ul>
- <li>1<span class="icon"></span>
- <p>锋科技了束带结发历史的会计法落实到飞</p>
- </li>
- <li>2<span class="icon"></span>
- <p>锋科技了束带结发历史的会计法落实到飞</p>
- </li>
- <li>3<span class="icon"></span>
- <p>锋科技了束带结发历史的会计法落实到飞</p>
- </li>
- </ul>
- </li>
- <li class="item">
- <h1>标题二<i></i></h1>
- <ul>
- <li>1<span class="icon"></span>
- <p>锋科技了束带结发历史的会计法落实到飞</p>
- </li>
- <li>2<span class="icon"></span>
- <p>锋科技了束带结发历史的会计法落实到飞</p>
- </li>
- <li>3<span class="icon"></span>
- <p>锋科技了束带结发历史的会计法落实到飞</p>
- </li>
- </ul>
- </li>
- <li class="item">
- <h1>标题三<i></i></h1>
- <ul>
- <li>1<span class="icon"></span>
- <p>锋科技了束带结发历史的会计法落实到飞</p>
- </li>
- <li>2<span class="icon"></span>
- <p>锋科技了束带结发历史的会计法落实到飞</p>
- </li>
- <li>3<span class="icon"></span>
- <p>锋科技了束带结发历史的会计法落实到飞</p>
- </li>
- </ul>
- </li>
- </li>
- <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
- <script type="text/javascript">
- jQuery(function(){
- $('.menu .item').each(function(){
- var flag=true;
- $(this).find('h1').on('click',function(){
- if(flag){
- $('.menu .item').removeClass('active');
- $(this).parent('.item').addClass('active');
- flag=false;
- }else{
- $(this).parent('.item').removeClass('active');
- flag=true;
- }
- });
- });
- $('.menu .item ul li').each(function(){
- var flag=true;
- $(this).on('click',function(event){
- event.preventDefault();
- event.stopPropagation();
- if(flag){
- $('.menu ul li').removeClass('active');
- $(this).addClass('active');
- flag=false;
- }else{
- $(this).removeClass('active');
- flag=true;
- }
- });
- });
- });
- </script>
- </body>
- </html>
好了,本文内容到此结束,希望对大家有所帮助!
您可能感兴趣
- html5div怎样居中(HTML5+CSS设置浮动却没有动反而在中间且错行的问题)
- vue设置div大小(Vue实现div滚轮放大缩小)
- div和css怎么铺背景(css3实现一个div设置多张背景图片及background-image属性实例演示)
- css中div高度自适应
- 自制cssdiv导航栏(css利用transform skewX制作平行四边形导航菜单)
- css3特性动画图(CSS3+DIV实现漂亮的动画彩色标签)
- div中设置图片的大小(div或img图片高度随宽度自适应的方法)
- cssdiv垂直居中怎么设置(CSS设置DIV垂直居中的N种方法 兼容IE浏览器)
- js实现div(javascript拖曳互换div的位置实现示例)
- 怎么给div添加按下去效果(DIV点击折叠实例代码)
- DIV+CSS网页布局时常犯的几个错误
- css控制div上下移动(CSS鼠标悬浮DIV后显示DIV外的按钮解决方法)
- docker查看镜像详细内容(Docker镜像分析工具dive原理解析)
- css隐藏div(CSS控制DIV层显示和隐藏的实现方法)
- css代码大全登录界面(Div+CSS仿微信公众平台登录页面)
- div css实例列表(DIV+CSS实现电台列表设计的示例代码)
- 魅族智能手表充电座曝光 Type-C 接口,线座分离设计(魅族智能手表充电座曝光)
- 华为 Watch GT2 Pro 智能手表曝光,新增支持无线充电(华为WatchGT2)
- vivo首款智能手表来了 也有血氧饱和度监测,一次充电18天续航(vivo首款智能手表来了)
- 你知道 七夕 的真正含义吗(你知道七夕的真正含义吗)
- 七夕的寓意(七夕的寓意)
- 苏志燮赵恩静结婚,韩国四大公共财产变三人,这么快就有替补了(苏志燮赵恩静结婚)
热门推荐
- 查询mysql 死锁(MySQL线上死锁分析实战)
- nginx是怎样负载均衡的(Nginx四层负载均衡的配置指南)
- 微信公众号文章 爬虫(python抓取搜狗微信公众号文章)
- centosftp服务器的配置(CentOS6.9中搭建FTP服务器的方法)
- html5能取数据库吗(HTML5 客户端数据库简易使用:IndexedDB)
- php中如何打开文件读文件(PHP通过文件保存和更新信息的方法分析)
- sqlserver表分区缺点(SQL Server 公用表表达式CTE实现递归的方法)
- qos实现限速(apche 多端口配置及网站指向非apche默认的网站文件夹设置方法)
- 网页嵌入百度UEditor富文本编辑器
- 超级小旋风asp服务器软件简单使用说明(超级小旋风asp服务器软件简单使用说明)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9