說明
在設計博客首頁文章分類等欄目時，有時候列表內容太多往往不是一次性展示出來。此時需要添加更多功能，當點擊更多標籤時再展示剩餘隱藏的項目。
效果
代碼
<!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>