• js实现展开与收回


    1.通过id控制单个层:

    <!DOCTYPE html>
    <html>
    <head>
     <meta charset="utf-8" />
     <title>html边框虚线演示</title>
     <style>
      .tabledata{
       background: rgba(251, 251, 251, 0.93);
       margin: 0;  /* 上 右 下 左 */
       border:1px solid #F00;
       }
      .tabledataxuxian{
       background: rgba(251, 251, 251, 0.93);
       margin: 0;  /* 上 右 下 左 */
       border:1px dashed #F00;
       }
     </style>
     <script language="javascript">
      function show_div(){
       var obj_div=document.getElementById("starlist");
       obj_div.style.display=(obj_div.style.display=='none')?'block':'none';
      }
      function hide_div(){
       var obj_div=document.getElementById("starlist");
       obj_div.style.display=(obj_div.style.display=='none')?'block':'none';
      } 
     </script>
    </head>
    <body>
     <a href="javascript:hide_div()" >字段详情说明</a>
     <div id="starlist">
      div 内容
     </div>
    </body>
    </html>

    js 脚本:

        <script language="javascript">
            function show_div(){
                var obj_div=document.getElementById("starlist");
                obj_div.style.display=(obj_div.style.display=='none')?'block':'none';
            }
            function hide_div(){
                var obj_div=document.getElementById("starlist");
                obj_div.style.display=(obj_div.style.display=='none')?'block':'none';
            }    
        </script>

    2.通过class控制多个层:

    <!DOCTYPE html> 
    <html> 
    <head> 
        <meta charset="utf-8" /> 
        <title>html边框虚线演示</title> 
        <style> 
            .tabledata{
                background: rgba(251, 251, 251, 0.93);
                margin: 0;  /* 上 右 下 左 */
                border:1px solid #F00;
                }
            .tabledataxuxian{
                background: rgba(251, 251, 251, 0.93);
                margin: 0;  /* 上 右 下 左 */
                border:1px dashed #F00;
                }
        </style> 
        <script language="javascript">
            function show_div(){
            var obj_div_s=document.getElementsByClassName("starlist");
            for (var i=0,obj_div;obj_div=obj_div_s[i];i++){
                    obj_div.style.display=(obj_div.style.display=='none')?'block':'none';
                }
            }
            function hide_div(){
            var obj_div_s=document.getElementsByClassName("starlist");
            for (var i=0,obj_div;obj_div=obj_div_s[i];i++){
                    obj_div.style.display=(obj_div.style.display=='none')?'block':'none';
                }
    
            }
        </script>
    </head> 
    <body> 
        <a href="javascript:hide_div()" >字段详情说明</a>
        <div class="starlist">
            div 内容
    
        </div>
        <div class="starlist">
            div 内容
        </div>
        <div class="starlist">
            div 内容
        </div>
    </body> 
    </html>

    js脚本:

        <script language="javascript">
            function show_div(){
            var obj_div_s=document.getElementsByClassName("starlist");
            for (var i=0,obj_div;obj_div=obj_div_s[i];i++){
                    obj_div.style.display=(obj_div.style.display=='none')?'block':'none';
                }
            }
            function hide_div(){
            var obj_div_s=document.getElementsByClassName("starlist");
            for (var i=0,obj_div;obj_div=obj_div_s[i];i++){
                    obj_div.style.display=(obj_div.style.display=='none')?'block':'none';
                }
    
            }
        </script>
  • 相关阅读:
    前端生成二维码插件jquery.qrcode.min.js
    Spring的PropertyPlaceholderConfigurer
    Mysql5.7.20安装随笔
    Tomcat配置虚拟目录(目录+文件)
    js中的特殊类型
    使用 adb 命令一次性为多个设备安装 apk
    高通工具使用指导书
    QXDM及QCAT软件使用入门指南V1.0
    CTS测试笔记
    Android adb shell启动应用程序的方法
  • 原文地址:https://www.cnblogs.com/jingzaixin/p/13385272.html
Copyright © 2020-2023  润新知