说明

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

效果

代码

<!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. Java21 + SpringBoot3整合Redis，使用Lettuce连接池，推荐连接池参数配置，封装Redis操作

    目录 前言 相关技术简介 Redis 实现步骤 引入maven依赖 修改配置文件 定义Redis配置类 定义Redis服务类,封装Redis常用操作 使用Redis服务类 总结 前言 近日心血来潮想做 ...

  2. [转帖]MySQL 官方出品，比 mydumper 更快的多线程逻辑备份工具-MySQL Shell Dump & Load

    MySQL 官方出品,比 mydumper 更快的多线程逻辑备份工具-MySQL Shell Dump & Load - 知乎 (zhihu.com) ​ 目录 收起 什么是 MySQL Sh ...

  3. [转帖]Mnesia reports that this RabbitMQ cluster has experienced a network partition.

    一 问题描述 双节点RabbitMQ集群发生了脑裂,节点日志报错: [error] <0.6318.0> Mnesia(rabbit@pc2): ** ERROR ** mnesia_ev ...

  4. [粘贴]使用 Dumpling 导出数据

    https://docs.pingcap.com/zh/tidb/stable/dumpling-overview#dumpling-%E4%B8%BB%E8%A6%81%E9%80%89%E9%A1 ...

  5. [转帖]88. sys_kwr

    88. sys_kwr ¶ 88.1. 插件sys_kwr简介 ¶ 插件sys_kwr是KingbaseES 的一个扩展插件.主要功能是通过周期性自动记录性能统计相关的快照,分析出KingbaseES ...

  6. [转帖]Linux内核网络中的软中断ksoftirqd

    https://zhuanlan.zhihu.com/p/361976930 1. 前言 之前分享过Linux内核网络数据包的接收过程,当执行到网卡通过硬件中断(IRQ)通知CPU,告诉它有数据来了, ...

  7. 【构造，图论，建模】Loj3629「2021 集训队互测」序列

    Problem Link 有一个长为 \(n\) 的未知序列,给定 \(m\) 个限制,每个限制形如给定 \(i,j,k,x\),要求 \(a_i,a_j,a_k\) 的中位数为 \(x\).构造一个 ...

  8. x86 x64 arm64的区别

    我们常说的高通 865,麒麟990 不是 CPU 是 SoC(System On Chip),SoC 除了 CPU 外,还有 GPU,还有可选的浮点数加速器,专用于深度模型的加速器,等等.除此以外,S ...

  9. 小白学k8s(6)使用kubespray部署k8s

    kubespray部署k8s 准备 需要关闭防火墙 配置hosts 处理镜像 配置文件 运行 通过对应的镜像 运行代码 查看结果 出现的问题 墙 错误的配置 kubespray部署k8s 准备 kub ...

  10. 深入探索OCR技术：前沿算法与工业级部署方案揭秘

    深入探索OCR技术:前沿算法与工业级部署方案揭秘 注:以上图片来自网络 1. OCR技术背景 1.1 OCR技术的应用场景 OCR是什么 OCR(Optical Character Recogniti ...