说明

在设计博客首页文章分类等栏目时，有时候列表内容太多往往不是一次性展示出来。此时需要添加更多功能，当点击更多标签时再展示剩余隐藏的项目。

效果

代码

<!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>js+css实现DIV展示更多隐藏信息</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">

    <script src="js/jquery.min.js"></script>

    <style type="text/css">

        ul {

            list-style: none;

            padding-left: 16px;

        }

        a {

            cursor: pointer;

            color: #333;

        }

        a,

        a:link,

        a:visited,

        a:hover,

        a:active {

            text-decoration: none;

        }

        a:hover {

            color: #ff6700;

        }

        .category-box {

            background-color: #fff;

            min-height: 240px;

            width: 300px;

            margin: 20px auto;

        }

        .category-content {

            padding: 0px 16px 10px 0px;

        }

        .flexible-panel .category-content {

            max-height: 180px;

            overflow: hidden;

        }

        .category-content ul li {

            margin-top: 8px;

        }

        .category-content ul li a {

            display: block;

        }

        .category-content ul li a span.count {

            font-size: 12px;

            color: #858585;

        }

        .category-content ul.hot-post-list li p.read {

            font-size: 12px;

            color: #858585;

            line-height: 20px;

        }

        .float-right {

            float: right !important;

        }

        /*更多*/

        .category-content a.show-more-btn {

            font-size: 12px;

        }

        /*文章分类*/

        #post-category a.show-more-btn:hover {

            background: #dff0d8;

        }

    </style>

</head>

<body>

    <div id="post-category" class="category-box flexible-panel panel panel-success">

        <div class="panel-heading">

            <h3 class="panel-title">文章分类</h3>

        </div>

        <div class="category-content">

            <ul>

                <li>

                    <a href="#">

                        <span>java基础</span>

                        <span class="count float-right">7篇</span>

                    </a>

                </li>

                <li>

                    <a href="#">

                        <span>Oracle开发</span>

                        <span class="count float-right">2篇</span>

                    </a>

                </li>

                <li>

                    <a href="#">

                        <span>web前端</span>

                        <span class="count float-right">0篇</span>

                    </a>

                </li>

                <li>

                    <a href="#">

                        <span>spring boot</span>

                        <span class="count float-right">0篇</span>

                    </a>

                </li>

                <li>

                    <a href="#">

                        <span>bootstrap</span>

                        <span class="count float-right">0篇</span>

                    </a>

                </li>

                <li>

                    <div class="text-center more">

                        <a class="btn btn-link-blue show-more-btn">更多</a>

                    </div>

                    <a href="#">

                        <span>项目实战</span>

                        <span class="count float-right">0篇</span>

                    </a>

                </li>

                <li>

                    <a href="#">

                        <span>数据结构</span>

                        <span class="count float-right">0篇</span>

                    </a>

                </li>

                <li>

                    <a href="#">

                        <span>大数据</span>

                        <span class="count float-right">0篇</span>

                    </a>

                </li>

            </ul>

        </div>

    </div>

    <script>

        // 更多

        $("a.show-more-btn").click(function () {

            $(this).parents('div.category-box').removeClass('flexible-panel');

            $(this).parents('div.more').remove();

        });

    </script>

</body>

</html>

关于生成列表数据

我后台用的spring boot+thymeleaf，页面使用th:foreach实现列表数据加载。这里提供出来给大家参考：

<ul>

                    <li th:each="category,stat:${session.authorCategoryList}">

                        <div th:if="${stat.index}==5" class="text-center more">

                            <a class="btn btn-link-blue flexible-btn">更多</a>

                        </div>

                        <a href="#">

                            <span th:text="${category.categoryName}">java-web</span>

                            <span class="count float-right" th:text="${category.postCount}+'篇'">12篇</span>

                        </a>

                    </li>

                </ul>

js加css实现div展示更多隐藏内容的更多相关文章

  1. css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  2. 一个js加css加html完成的HTML

    效果图: 代码: HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  3. css固定div头部 滚动条滚动内容

    页面布局,固定头部,滚动下方内容 实际场景 在制作页面的时候,经常会遇到要这样的情况:整个页面,整体分三大模块,头部固定,内容区域,左边固定,右边可以滚动. 最终想要的效果 案例源码 <!DOC ...

  4. js 加载 xml 及遍历属性及内容 整理

    本文旨在: js加载xml文件并读取节点信息 1 加载xml文件 var xmlDoc = loadXMLDoc("negativeData.xml"); function loa ...

  5. js或css指定元素点击时内容不可被选中

    一.css3中可以使用"user-select"属性: body{ -webkit-user-select:none;/*谷歌 /Chrome*/ -moz-user-select ...

  6. CSS检测窗口大小显示和隐藏内容

    代码不多 用css写的话简单一点 @media (max-width: 1024px) { #hidden { display: none; } } max-width 是要检测的宽度

  7. 打开一个网站,加载顺序是什么?先加载HTML然后JS然后CSS?还是什么?

    HTML页面加载和解析流程 : 1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件. 2. 浏览器开始载入html代码,发现<head& ...

  8. Js判断CSS文件加载完毕的实例教程

    要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: 代码如下 复制代码 // 代码节选至se ...

  9. js插件动态加载js、css解决方案

    最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...

  10. 动态添加div及对应的js、css文件

    动态添加div及对应的js.css文件 在近期的项目开发中需要在首页中添加很多面板型的div,直接加载代码显得很繁琐,于是利用js封装一个动态添加div及其对应css文件和js文件的方法供大家参考使用 ...

随机推荐

  1. SV 并发线程

    内容 assign d = a & b; assign e = b | c; begin...end之间的语句是串行执行的 fork....join语句是并行执行的 逻辑仿真工具中的并发性 仿 ...

  2. [转帖]Linux命令（51）——ipcs命令

    https://cloud.tencent.com/developer/article/1380589 1.命令简介 ipcs命令用于报告Linux中进程间通信设施的状态,显示的信息包括消息列表.共享 ...

  3. 【转帖】linux 内核分析工具 Dtrace、SystemTap、火焰图、crash等

    << System语言详解 >> 关于 SystemTap 的书. 我们在分析各种系统异常和故障的时候,通常会用到 pstack(jstack) /pldd/ lsof/ tc ...

  4. [转帖]SQL标准

    SQL 的标准 1986 年 10 月,美国国家标准协会 ANSI 采用 SQL 作为关系数据库管理系统的标准语言,并命名为 ANSI X3. 135-1986,后来国际标准化组织(ISO)也采纳 S ...

  5. Go 跟踪函数调用链，理解代码更直观

    Go 跟踪函数调用链,理解代码更直观 目录 Go 跟踪函数调用链,理解代码更直观 一.引入 二.自动获取所跟踪函数的函数名 三.增加 Goroutine 标识 四.让输出的跟踪信息更具层次感 五.利用 ...

  6. RocketMQ—引言

    RocketMQ-引言 MQ介绍 在学习RocketMQ之前,我们先来看以下MQ的意思. MQ是Message Queue的首字母缩写. Message:意思为消息,在我们生活中可以是一句话/一个短信 ...

  7. druid和druid-spring-boot-starter区别，以及springboot项目中提示报错Cannot resolve configuration property 'spring.datasource.xxxx' 和hikari配置属性

    一.druid和druid-spring-boot-starter区别分析 作用是一样的,都是连接池提供连接,里边的配置参数都是一样的: druid-spring-boot-starter只是在dru ...

  8. 【六】gym搭建自己环境升级版设计，动态障碍------强化学习

    相关文章: [一]gym环境安装以及安装遇到的错误解决 [二]gym初次入门一学就会-简明教程 [三]gym简单画图 [四]gym搭建自己的环境,全网最详细版本,3分钟你就学会了! [五]gym搭建自 ...

  9. 驱动开发：如何枚举所有SSDT表地址

    在前面的博文<驱动开发:Win10内核枚举SSDT表基址>中已经教大家如何寻找SSDT表基地址了,找到后我们可根据序号获取到指定SSDT函数的原始地址,而如果需要输出所有SSDT表信息,则 ...

  10. hydra 密码爆破工具入门

    Hydra(九头蛇海德拉)是希腊神话之中的一个怪兽,以九个头闻名于世,在Kali中hydray(hai der rua) 是默认被安装的,该工具是密码破解的老司机,可以破解各种登录密码,非常怪兽,但是 ...