说明

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

效果

代码

<!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. [转帖]CIDR

    什么是 CIDR? 无类别域间路由 (CIDR) 是一种 IP 地址分配方法,可提高互联网上的数据路由效率.每台连接到互联网的计算机.服务器和最终用户设备都有一个与之关联的唯一编号,称为 IP 地址. ...

  2. [转帖]AES算法（四）基本工作模式

    https://zhuanlan.zhihu.com/p/376077687 8 人赞同了该文章 本文所述工作模式可适用于 DES.AES 等分组密码算法中 分组密码算法只能加密固定长度为 N 比特的 ...

  3. [转帖]Docker-Compose 自动创建的网桥与局域网冲突解决方案

    https://zhuanlan.zhihu.com/p/379305319 Docker-Compose 自动创建的网桥与局域网冲突解决方案 当我使用docker-compose的方式部署内网的ha ...

  4. [转帖]Linux性能分析（二）：理解CPU上下文切换

    在计算机中,上下文切换是指存储进程或线程的状态,以便以后可以还原它并从同一点恢复执行.这允许多个进程共享一个CPU,这是多任务操作系统的基本功能. Linux 是一个多任务操作系统,它支持远大于 CP ...

  5. Oracle12c(未更新任何补丁) 使用compression=all 参数导出之后导入失败

    1. 最近使用Oracle12c 进行相关的测试工作, 平台linux 和 windows 都有一个问题 备份恢复使用的 compression=all 时导入数据库不管是oracle12c还是 or ...

  6. 物联网浏览器(IoTBrowser)-Web串口自定义开发

    物联网浏览器(IoTBrowser)-Web串口自定义开发 工控系统中绝大部分硬件使用串口通讯,不论是原始串口通讯协议还是基于串口的Modbus-RTU协议,在代码成面都是使用System.IO.Po ...

  7. js循环之map在工作中的使用

    map函数会返回一个全新的数组哈(重要 在实际中很有用) map循环空那个数组时,不会报错的. 使用map的优势 可以返回一个全新的数组 可以用于过滤 ps==>:map里面不要有判断,否者会返 ...

  8. v-for动态添加表单,并且获取表单中的值

    vue是数据驱动视图,所以要想改变页面的结构,就要首先改变数据. 要想动态添加一个input表单,每当你点击的时候,添加一个数据在数组里面. handler(mess){ this.list.push ...

  9. 【解决了一个小问题】macbook m2 下交叉编译 musl-gcc 支持的 gozstd 库

    作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 我的 golang 项目中使用了 gozstd, 在 ma ...

  10. 【JS逆向百例】某音乐网分离式 webpack 非 IIFE 改写实战

    关注微信公众号:K哥爬虫,QQ交流群:808574309,持续分享爬虫进阶.JS/安卓逆向等技术干货! 声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途 ...