<!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. Centos7+puppet+foreman,实现部署OS

    一.简介 1. 需要实现操作系统的部署 foreman提供了一个基于kickstart的部署工具,输入一台服务器的部署网卡的mac地址和hostname.ip等信息,就能自动的帮我们部署完,并且,还可 ...

  2. Asp.Net Mvc Area二级域名

    参考:https://blog.maartenballiauw.be/post/2009/05/20/aspnet-mvc-domain-routing.html 参考:https://www.cnb ...

  3. 算法题：购买n个苹果，苹果6个一袋或者8个一袋，若想袋数最少，如何购买？

    这是面试一家公司java实习生的算法题,我当时把代码写出来了,但是回学校之后搜索别人的算法,才发现自己的算法实在是太简陋了呜呜呜 我的算法: public void buy(int n){ int m ...

  4. Go 关于 kafka 的生产者、消费者实例

    zookeeper + kafka 首先要在 apche 官网下载 kafka 的程序包(linux版本),然后放到服务器上解压,得到以下目录 bin 目录下包含了服务的启动脚本 启动 zookeep ...

  5. Git撤回已经推送(push)至远程仓库提交(commit)的版本

    背景 所以,经常会遇到已经提交远程仓库,但是又不是我想要的版本,要撤下来. 回退版本一般使用git reset,又分为: # 不删除工作空间改动代码,撤销commit,不撤销git add . git ...

  6. 【转载】C#中PadLeft函数按特定字符补足字符串长度

    在C#开发过程中字符串String类处理过程中,有时字符串长度不够时,需要在左侧指定特定的字符来补足字符串长度,此时可以使用String类下的PadLeft方法对字符串的左边进行按特定的字符和特定的长 ...

  7. ABAP Code Inspector那些隐藏的功能，您都知道吗？

    最近有粉丝在后台给我留言,说新知识太多,"学不动了".所谓温故而知新,今天我们就来重温下ABAP里的Code Inspector的用法. 2015年6月,我在SAP社区上写了一篇博 ...

  8. 【fiddler】fiddler基础

    一.浏览器设置 一般情况下,fiddler会自动修改IE浏览器的设置,捕捉到IE浏览器的搜有通讯.其他浏览器需要手动设置 如chrome 打开chrome->设置->高级->系统-& ...

  9. DB2新建编目及删除编目

    场景:在添加一个新数据库的连接时,需要先建立此数据库的编目信息 新建: 1.获取数据库IP.端口.数据库名称 2.打开DB2客户端的“DB2命令窗口” 3.按以下命令执行 db2 catalog tc ...

  10. Zabbix MySQL percona 模板部署

    Zabbix MySQL percona服务端执行以下操作https://www.zabbix.com/download?zabbix=4.0&os_distribution=centos&a ...