移動端給B2的篩選添加一個更多按鈕，點擊更多按鈕之前，只顯示部分內容，點擊按鈕后，顯示全部內容.
篩選是一個很強大的功能，可以幫助方更快速的從多個維度出發，找到自己需要的內容。但是，隨著網站內容的越來越多，標簽越來越多，在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>保存代碼后即可完成部署。達到上圖所示效果。
