说明

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

效果

代码

<!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. [转帖]9.1 TiDB HTAP 的特点

    HTAP 是 Hybrid Transactional / Analytical Processing 的缩写.这个词汇在 2014 年由 Gartner 提出.传统意义上,数据库往往专为交易或者分析 ...

  2. 【转帖】8.JVM双亲委派机制（面试常问）

    目录 1.什么是双亲委派机制? 2.双亲委派机制的优势 3.沙箱安全机制 1.什么是双亲委派机制? 双亲委派机制工作原理:(面试) 1.如果一个类加载器收到了类加载请求,它并不会自己先去加载,而是把这 ...

  3. [转帖]官网:Nacos的授权验证

    https://nacos.io/zh-cn/docs/v2/guide/user/auth.html 注意 Nacos是一个内部微服务组件,需要在可信的内部网络中运行,不可暴露在公网环境,防止带来安 ...

  4. [转帖]tubostat

    TURBOSTAT(8) System Manager's Manual TURBOSTAT(8) NAME turbostat - Report processor frequency and id ...

  5. [转帖]【k8s】5、资源管理命令-声明式

    文章目录 一. yaml和json介绍 1.yuml语言介绍 2.k8s支持的文件格式 3.yaml和json的主要区别 二.声明式对象管理 1.命令式对象配置 2.声明式对象配置 3.声明式对象管理 ...

  6. [转帖] Linux查看日志文件写入速度的4种方法

    https://www.cnblogs.com/codelogs/p/16365448.html 简介# 有时,我们需要查看某个文件的增长速度,如日志文件,以此来感受系统的负载情况,因为一般情况下,日 ...

  7. Sysbench 开启超线程/关闭超线程以及容器运行数据库的性能损耗

    Sysbench 开启超线程/关闭超线程性能损耗 摘要 Stress-NG 测试完之后 突然想 使用sysbenchen也进行一次压测 验证一把 超线程对数据的性能影响. 压测命令 ./sysbenc ...

  8. 清空elementui让计数器input-number的默认值

    <el-form-item label="考试时长:" prop="testTimeLong"> <el-input-number style ...

  9. 【Java】先return还是先finally

    之前调试只发现有的方法执行完return语句后再执行finally,但是没有细究 最近debug代码的时候发现,不同返回类型的方法,return和finally执行顺序竟然不一样 先看返回类型为voi ...

  10. SqlSugar多库/多租户

    1. 多库和多租户 如果是接口ISugarClient先看一下标题6,看完在看这儿 1.1 固定多数据库模式 数据库数量是固定的一般在声明的全部加上 //通过ConfigId进行数据库区分 var d ...