zoukankan      html  css  js  c++  java
  • 容易上手-类似ERP系统 简单特效

    今天大概简单写一个效果,

    这个效果 很容易 上手的:

    html:

    <style type="text/css">
    .menu_list ul{display:none;}
    .content{100%;clear:both;}
    .menu{float:left;20%;}
    .main{float:left;80%;height:800px;background:#eee;}
    </style>
    <div class="content">
    <h6 class="close">关闭</h6>
    <div class="menu">

    <ul class="menu_list">
    <li>
    <h3>订单管理</h3>
    <ul>
    <li>订单管理</li>
    <li>快递状态</li>
    <li>再租设备</li>
    </ul>
    </li>
    <li>
    <h3>订单管理</h3>
    <ul>
    <li>订单管理</li>
    <li>快递状态</li>
    <li>再租设备</li>
    </ul>
    </li>

    <li>
    <h3>订单管理</h3>
    <ul>
    <li>订单管理</li>
    <li>快递状态</li>
    <li>再租设备</li>
    </ul>
    </li>

    <li>
    <h3>订单管理</h3>
    <ul>
    <li>订单管理</li>
    <li>快递状态</li>
    <li>再租设备</li>
    </ul>
    </li>
    </ul>
    </div>
    <div class="main"></div>
    </div>

    插入jquery 库

    jquery:

    <script type="text/javascript">
    $(".menu_list li").click(function(){
    if($(this).find("ul").is(":hidden")){
    $(this).find("ul").show();
    }else{
    $(this).find("ul").hide();
    }
    })

    $(".close").click(function(){
    if($(".menu").is(":hidden")){
    $(".menu").show();
    $(".close").html("关闭")
    $(".main").css({"width":"80%"});
    }else{
    $(".menu").hide();
    $(".close").html("显示")
    $(".main").css({"width":"100%"});
    }
    })

    </script>

  • 相关阅读:
    CSS复合选择器
    模块之shutil模块模块详解
    模块之sys模块详解
    模块之os模块详解
    map遍历
    java完美处理表情符
    死磕设计模式—建造者模式
    Java String getChars()方法
    Java知识系统回顾整理01基础06数组05复制数组
    Java知识系统回顾整理01基础06数组04增强型for循环
  • 原文地址:https://www.cnblogs.com/fs521cw/p/5195184.html
Copyright © 2011-2022 走看看