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

移动终端在B2滤波器上增加了一个按钮。在点击more按钮之前,只显示部分内容,点击按钮之后,显示全部内容。

过滤是一个非常强大的功能,可以帮助人们更快地从多个维度找到自己需要的内容。但是随着网站内容的增加,标签越来越多,PC端好,移动端不舒服。

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

思路

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

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

部署:

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

Modules/Templates/Archive.php

找到第57行的ul标签

修改前: <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>

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

免责声明

本站资源大多来自网络,如有侵犯你的权益请联系管理员Ciyol 或给邮箱发送邮件 admin@ciyol.cn 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到评论下载的文章,评论后刷新页面点击对应的蓝字按钮即可跳转到下载页面本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip(点击下载),zip、rar解压,建议下载WinRAR(点击下载)

给TA买糖
共{{data.count}}人
人已赞赏
WordPress美化

添加哔哩哔哩充电样式 - 7B2主题美化

2020-10-15 12:01:39

WordPress教程

WordPress禁用Embeds功能 Disable Embeds插件与无插件

2019-1-21 11:11:15

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索