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

jaysun

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

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

通过css强制所有过滤器同时显示,如下图所示:

202011151018076.webp.jpg

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

2020111510180762.webp.jpg

部署:

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

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>

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

您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
评论列表 (暂无评论,43人围观)

还没有评论,来说两句吧...

目录[+]

取消
微信二维码
微信二维码
支付宝二维码