B2主题美化-过滤器添加更多按钮

有时候选择项目较多，页面显示就比较杂乱，这时候就需要规划显示内容，过滤是一个非常强大的功能，可以帮助人们更快地从多个维度找到自己需要的内容。但是随着网站内容的增加，标签越来越多，PC端还好，移动端不舒服。

因此，您可以在移动终端上添加更多按钮来过滤b2。单击“更多”按钮之前只会显示部分内容，单击该按钮后会显示所有内容。

通过CSS强制所有过滤器同时显示，如下图所示：

这样又太多了，挤在一起，不好看，可以设置一股固定的高度，让他们只显示三行，加上一个按钮，点击后展开全部，例如这样:

部署：

筛选的相关代码在这个文件中：

Modules/Templates/Archive.php

修改前： <ul>';修改后：<ul id="n-open">';

找到第215行的代码

return '<li><div class="filter-name">'.__('专题','b2').'：</div><div class="filter-items">'.$a.'</div></li>';

修改为：

return '<li><div class="filter-name">'.__('品牌：','b2').'</div> <span class="n-class" onclick="openTwo()">更多</span> <div class="filter-items">'.$a.'</div></li>';

在Archive.php文件的底部的<?php前添加以下CSS和JS代码：

<style type="text/css">/*筛选优化*//*PC端隐藏更多按钮*/.n-class { display: none;}@media screen and (max-width: 768px) { /*磨砂背景*/ .tax-header .wrapper { position: initial; } /*隐藏多余信息*/ .tax-header .tax-info { display: none; } .waves-bg { display: none; } /*强制显示*/ .tax-fliter-cat { display: block !important; top: 0px; position: inherit; } .filter-items { white-space: inherit; height: auto; } /*文本美化*/ .filter-name { color: #f5f5f5c7; width: auto; background-color: #00000042; border-radius: 5px; padding: 2px 4px; } /*显示更多按钮*/ .n-class { display: block; position: absolute; right: 2em; color: #f5f5f5c7; width: auto; background-color: #00000042; border-radius: 5px; padding: 2px 4px; } /*固定高度*/ .filter-items { height: 100px; } /*自适应高度*/ .n-open .filter-items { height: auto; } /*隐藏更多按钮*/ .n-open .n-class { display: none; }}</style> <script type="text/javascript">function openTwo() {document.getElementById('n-open').className = 'n-open';}</script>

保存代码后即可完成部署。达到上图所示效果。