zoukankan      html  css  js  c++  java
  • 展开/收缩效果切换

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>展开/收缩效果切换</title>
        <style>
            #box .hid{display:none;}
            #box .show{display:block;}
            #tog{cursor: pointer}
            li{list-style: none}
        </style>
    </head>
    <body>
    <ul id="box">
        <li>我是当前显示的内容</li>
        <li>我是当前显示的内容</li>
        <li>我是当前显示的内容</li>
        <li>我是当前显示的内容</li>
        <li>我是当前显示的内容</li>
        <li>我是当前显示的内容</li>
        <li>我是当前显示的内容</li>
        <li>我是当前显示的内容</li>
        <li>我是当前显示的内容</li>
        <li>我是当前显示的内容</li>
        <li>我是当前显示的内容</li>
        <li>我是当前显示的内容</li>
        <li>我是当前显示的内容</li>
        <li>我是当前显示的内容</li>
        <li>我是当前显示的内容</li>
        <li>我是当前显示的内容</li>
        <li>我是当前显示的内容</li>
        <li>我是当前显示的内容</li>
        <li>我是当前显示的内容</li>
    </ul>
    <p id="tog">展开</p>
    <script type="text/javascript" src="http://files.cnblogs.com/files/heyiming/jquery-2.1.4.min.js"></script>
    <script>
        var len=$("#box li").length;
        function int(){
            //设置显示多少条
            for(i=8;i<len;i++){
                $("#box li").eq(i).addClass("hid");
            }
        }
        $("#tog").click(function(){
            var t=$(this).text();
            if(t=="展开"){
                $("#box .hid").addClass("show");
                $(this).text("收缩");
            }else{
                $("#box .hid").removeClass("show");
                $(this).text("展开");
            }
        });
        int();//初始化隐藏多余标签
    </script>
    </body>
    </html>

    效果图:

  • 相关阅读:
    HTML基础(一)基本语法知识
    本地方法接口
    本地方法栈
    虚拟机栈相关的问题
    栈帧的内部结构--一些附加信息
    基于角色的权限控制设计
    SpringBoot普通消息队列线程池配置
    栈帧的内部结构--动态返回地址(Return Address)
    栈帧的内部结构--动态链接 (Dynamic Linking)
    栈帧的内部结构--操作数栈(Opreand Stack)
  • 原文地址:https://www.cnblogs.com/heyiming/p/6599944.html
Copyright © 2011-2022 走看看