篩選是一個(gè)很強(qiáng)大的功能，可以幫助方更快速的從多個(gè)維度出發(fā)，找到自己需要的內(nèi)容。但是，隨著網(wǎng)站內(nèi)容的越來越多，標(biāo)簽越來越多，在PC端還好，在移動(dòng)端就難受了。

因此，可以在移動(dòng)端給B2的篩選添加一個(gè)更多按鈕，點(diǎn)擊更多按鈕之前，只顯示部分內(nèi)容，點(diǎn)擊按鈕后，顯示全部內(nèi)容。

思路

通過css強(qiáng)制所有的篩選同時(shí)顯示，如下圖：

這樣又太多了，擠在一起，不好看，可以設(shè)置一股固定的高度，讓他們只顯示三行，加上一個(gè)按鈕，點(diǎn)擊后展開全部，例如這樣:

部署：

篩選的相關(guān)代碼在這個(gè)文件中：

Modules/Templates/Archive.php

找到第57行的ul標(biāo)簽，

修改前： <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">

/*篩選優(yōu)化*/

/*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;
  }
  /*強(qiáng)制顯示*/
  .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;
  }

  /*自適應(yīng)高度*/
  .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>

保存代碼后即可完成部署。達(dá)到上圖所示效果。