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>

  • 相关阅读:
    第八周课程总结&实验报告(六)
    第七周课程总结&实验报告(五)
    第六周&java实验报告四
    第五周课程总结&试验报告(三)
    第四周作业
    2019春总结作业
    第二周基础作业
    第三周作业
    2019期末总结
    第十四周课程总结 & 实验报告
  • 原文地址:https://www.cnblogs.com/fs521cw/p/5195184.html
Copyright © 2011-2022 走看看