说明

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

效果

代码

<!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. Qt5.9 UI设计(二)——最简Qt工程搭建

    前言 前面一章已经介绍了QT的开发环境的安装,这里介绍一下一个最简工程的搭建 操作步骤 新建项目 选择带界面的Qt Widgets Application 设置项目位置 注意这里的目录不能有中文路径 ...

  2. TLS 加密套件的学习与了解

    TLS 加密套件的学习与了解 加密套件 什么是加密套件? 加密套件是用于在SSL / TLS握手期间协商安全设置的算法的组合. 在ClientHello和ServerHello消息交换之后,客户端发送 ...

  3. [转帖]深入浅出分析LSM树（日志结构合并树）

    https://zhuanlan.zhihu.com/p/415799237 ​ 目录 收起 零.前言 一.LSM树数据结构定义 二.插入操作 三.删除操作 四.修改操作 五.查询操作 六.合并操作 ...

  4. [转帖]Shell编程之免交互

    目录 交互的概念与Linux中的运用 Here Document 免交互 tee命令重定向输出加标准输出 支持变量替换 多行注释 Expect 实例操作 免交互预设值修改用户密码 创建用户并设置密码 ...

  5. Chrome浏览器不同版本兼容性的验证方法

    Chrome浏览器不同版本兼容性的验证方法 背景 上周客户现场有出现使用国产信创设备上面的奇安信浏览器出现兼容性的问题. 开发认为是测试不全面导致. 认为测试应该必须测试过特定浏览器才可以进行说明. ...

  6. [转帖]MySQL 8.0新特性和性能数据

    https://plantegg.github.io/2022/07/03/MySQL8.0%E7%9A%84%E4%B8%80%E4%BA%9B%E6%95%B0%E6%8D%AE/ MySQL 8 ...

  7. 买彩票能中大奖？用Java盘点常见的概率悖论 | 京东云技术团队

    引言 <双色球头奖概率与被雷劈中的概率哪个高?> <3人轮流射击,枪法最差的反而更容易活下来?> 让我们用Java来探索ta们! 悖论1:著名的三门问题 规则描述:你正在参加一 ...

  8. 模块化Common.js与ES6

    为什么要模块化开发 1. 依赖关系(a文件依赖b文件中的方法,b文件必须在a文件之前引入) 2. 命名问题 (多个文件变量名,方法名相同会出现覆盖) 3. 代码组织(后期不好维护) 模块化规范有 1. ...

  9. js设置setAttribute、获取getAttribute、删除removeAttribute详细讲解

    setAttribute的理解 所有主流浏览器均支持 setAttribute() 方法. element.setAttribute(keys,cont) keys==>必需(String类型) ...

  10. Promise的异常穿透和中断Promise的链式请求

    1.Promise的异常穿透 1==>当你使用Promise的then,进行链式调用的时候,可以在最后指定失败的回调 2==>前面任何操作出现了异常,都会传递到最后失败的回调中进行处理: ...