说明

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

效果

代码

<!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展示更多隐藏内容相关推荐

html 高度不够,HTML/CSS：Div未扩展到内容高度
我有几个未扩展的div元素以匹配其内容的高度.我已经读过,这可能是由浮动内容引起的;这个内容不是浮动的 - 虽然我开始觉得我应该把我的电脑扔在河里.这算不算?HTML/CSS:Div未扩展到内容高度 ...
html查看更多隐藏内容,jQuery点击显示隐藏更多文字内容插件jquery.morecontent.js
插件描述:这是一款jQuery显示隐藏更多文字内容插件.该插件可以将很长的一段文字按要求进行部分隐藏和全部展示,并且可以定制隐藏和展开内容时的动画效果. jquery.morecontent.js 这 ...
css控制div显示／隐藏方法及２种方法比较原码[转]
CSS中的display和visibility css中display和visibility语法,他们都可以隐藏和显示html元素.看齐来他们很相似,所以很多人还是会搞错. 谈们的属性分别如下: di ...
如何使用js加css加html实现下象棋功能
为了使用 JavaScript.CSS 和 HTML 实现下象棋功能,您可以按以下步骤操作: 创建一个 HTML 页面,在其中编写代码来生成棋盘的图形. 使用 CSS 样式来设置棋盘的样式,如颜色.边 ...
css 设置div的宽度根据内容自适应
css设置: width:fit-content; 实现div居中,宽度自适应: margin: 0 auto; width:fit-content;
使用原生js实现点击按钮展示不同状态内容
话不多说直接上预览图和代码吧,图片可以自己找一些素材贴上去就行了 <!doctype html> <html> <head> <meta charset=&q ...
php 获取css值,如何通过JS获取CSS属性值
JS获取CSS属性 #f{background-color:#FF0000;} var o = document.getElementById('f'); document.write(o.style ...
js怎么给div加滑动条 vue给弹出层加滑动条(一分钟学会用js加滚动条)
@[TOC](怎么给div加滑动条给弹出层加滑动条(一分钟学会js加滚动条)) 给div加滑动条给需要滑动条的div加一个样式加一个高度,加一个overflow:auto; overflow:a ...
css div横屏超长滚动,CSS实现DIV超长截断，并显示...
DIV显示内容有时会超长,并把页面撑的很难看, 以前的做法是在JS中,或者后台判断其长度,过长就截断, 但由于中英文数字展示的宽度并不一样,截断的长度也就只能取最小值, 展示的效果也不好.利用CSS提 ...

js加css实现div展示更多隐藏内容

说明

效果

代码

关于生成列表数据

js加css实现div展示更多隐藏内容相关推荐

最新文章

热门文章