<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>折叠面板</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
*{
margin:0;
padding:0;
list-style: none;
}
body{
background:#F8F8FF;
}
#flodbox{
width:500px;
margin:0 auto;
}
.flodTitle{
padding:10px;
border-bottom:1px solid #ddd;
background: #696969;
color:#ffffff;
font-weight: bold;
font-size:18px;
cursor: pointer;
position: relative;
}
.flodTitle .num{
margin-right:10px;
background:red;
}
.flodTitle .titleBox{
display: inline-block;
width:80%;
}
.flodTitle .titleRightBox{
display: inline-block;
width:18%;
height:100%;
position: absolute;
top:0;
}
.flodTitle .titleRightwraper{
position: absolute;
top:50%;
transform: translateY(-50%);
width:100%;
text-align: center;
}
.flodContentBox{
padding:0 10px;
background:#DCDCDC;
height:100%;
}
.flodContentBox>li{
padding:4px 0;
border-bottom:1px solid #F8F8FF;
}
.flodContentBox>li:last-child{
border-bottom:0;
}
.rotateLeft{
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-moz-transform:rotate(-90deg); /* Firefox */
-webkit-transform:rotate(-90deg); /* Safari 和 Chrome */
-o-transform:rotate(-90deg); /* Opera */
}
.flodItem .flodTitle .titleRightwraper>i{
transition: all 0.5s;
-webkit-transition: all 0.5s; /* Safari */
}
</style>
</head>
<body>
<ul id="flodbox">
<li class="flodItem">
<div class="flodTitle">
<span class="titleBox">分类一</span>
<span class="titleRightBox">
<span class="titleRightwraper">
<i class="glyphicon glyphicon-chevron-down pull-right"></i>
<span class="num badge pull-right">53</span>
</span>
</span>
</div>
<ul class="flodContentBox">
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
</li>
<li class="flodItem">
<div class="flodTitle">
<span class="titleBox">分类一</span>
<span class="titleRightBox">
<span class="titleRightwraper">
<i class="glyphicon glyphicon-chevron-down pull-right"></i>
<span class="num badge pull-right">53</span>
</span>
</span>
</div>
<ul class="flodContentBox">
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
</li>
<li class="flodItem">
<div class="flodTitle">
<span class="titleBox">分类一</span>
<span class="titleRightBox">
<span class="titleRightwraper">
<i class="glyphicon glyphicon-chevron-down pull-right"></i>
<span class="num badge pull-right">53</span>
</span>
</span>
</div>
<ul class="flodContentBox">
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
</li>
</ul> <script>
$(function(){
$("#flodbox>.flodItem>.flodTitle").click(function(){
if($(this).find("i").hasClass("rotateLeft")){
$(this).find("i").removeClass("rotateLeft");
$(this).parent().find(".flodContentBox").slideDown();;
}else{
$(this).find("i").addClass("rotateLeft");
$(this).parent().find(".flodContentBox").slideUp();
}
})
})
</script>
</body>
</html>

jquery做个折叠面板的更多相关文章

  1. jquery实现通用结构折叠面板效果

    效果截图: 说明:可以任意添加多个类似结构样式,点击标题栏图片对应隐藏.显示. jquery代码: 思路一:基本方法 <script src="http://apps.bdimg.co ...

  2. jquery ui 常用(一)(自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| )

    条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...

  3. jQuery EasyUI 折叠面板accordion的使用实例

    1.对折叠面板区域 div 设置 class=”easyui-accordion” 2.在区域添加多个 div, 每个 div 就是一个面板 (每个面板一定要设置 title 属性). 3.设置面板属 ...

  4. Jquery Accordion 折叠面板

    属性 类型 默认值 active Boolean/Number/jQuery/Selector/Element 第一个面板 设定默认显示的面板.设置为 false 时默认不显示面板,需 collaps ...

  5. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  6. CSS实现折叠面板

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. layui中折叠面板的使用

    运用折叠面板后 可以让页面更加整洁 有什么不懂的可以留言 代码放到底部 需要引入的文件 JQuery代码: html代码 <div class="layui-colla-item&qu ...

  8. 第一百九十九节,jQuery EasyUI,Panel(面板)组件

    jQuery EasyUI,Panel(面板)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解EasyUI中Panel(面板)组件的使用方法,这个组件不依赖于其 ...

  9. jQuery Easy UI Panel(面板)组件

    panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 另一点跟前面 ...

随机推荐

  1. 针对Web的攻击技术

    主动攻击 SQL注入攻击 OS命令注入攻击 会话劫持 被动攻击 XSS攻击 CSRF攻击 HTTP首部注入攻击 会话固定攻击 一.主动攻击 1.SQL注入攻击(案例) 什么是SQL? SQL是用来操作 ...

  2. chrome网页中打开exe

    Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\VMS] @="URL:VMS" "URL Protoco ...

  3. JavaScript 基础(数据类型、函数、流程控制、对象)

    一.JavaScript概述 1.1 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名Script ...

  4. element-ui默认样式修改

    来自 :https://blog.csdn.net/wangguoyu1996/article/details/81394707 侵删 我们在使用element-ui的时候经常会遇到需要修改组件默认样 ...

  5. JS定时器做物体运动

    JS定时器是函数 setInterval(函数体/函数名  , 时间) 清楚定时器 clearInterval(函数) 时间单位(毫秒) 1000毫秒  = 1秒 首先我们要知道用JS定时器能干什么? ...

  6. MySql数据库操作之数据约束

    首先数据库的外键是数据库提供的一种完整性约束.在许多数据库的书上也会介绍到,然而对于外键这个完整性性约束究竟应该在数据库端实现,还是在项目业务端实现很多人有着不同的意见. 个人开发(小型应用).数据库 ...

  7. Linux——发行版

    主流发行版 1. Red Hat Linux Red Hat 公司一直是Linux 乃至开源世界的领导者.其有两个不同的发行版本: 一个商用版,称为Red Hat Enterprise Linux,专 ...

  8. 【OF框架】新建库表及对应实体,并实现简单的增删改查操作,封装操作标准WebApi

    准备 搭建好项目框架及数据库,了解框架规范. 1.数据库表和实体一一对应,表名实体名名字相同,用小写,下划线连接.字段名用驼峰命名法,首字母大写. 2.实体放在Entities目录下,继承Entity ...

  9. 'Cloud Native': What It Means, Why It Matters

    When HP announced July 28 that it was acquiring ActiveState's PaaS business, senior vice president B ...

  10. JVM元空间深度解析

    回顾一下上一次对于这次做的实验的一个背景说明: 这里将借助cglib这个库来完成动态类的创建,为啥要使用它?因为使用简单,二是在程序运行期可以动态的生成类,动态生成类之后生成类的元数据就会落入到元空间 ...