最近做自媒体账号搜索，需要一个条件筛选控件，最后发现淘宝的筛选样式挺好，就在网上找了一个，并根据实际进行了部分修改完善。
最终效果如下：
实现代码如下所示：
<link rel="stylesheet" type="text/css" href="${base}/search/filter/css/style.css">
<div class="container-fluid"
style="padding-top: 20px; padding-right: 0px; text-align: right;">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading"
style="text-align: left; margin-left: -14px; margin-bottom: 15px;">
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordion2" href="#collapseOne"
style="text-decoration: none;"><strong
style='font-size: 20px; color: #888; text-decoration: none;'>
筛选条件：</strong></a> <a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordion2" href="#collapseOne"> </a>
</div>
<div id="collapseOne" class="accordion-body collapse show" style="">
<ul class="select" style="margin-bottom: 0.2rem; padding: 0px 0px;">
<li class="select-list">
<dl id="select1">
<dt style="text-align: left; margin-left: 20px;">检索域：</dt>
<dd data="self_media_name" class="select-all selected">
<a href="#" style='color: #888;'>账号名称</a>
</dd>
<dd data="self_media_brief">
<a href="#" style='color: #888;'>账号介绍</a>
</dd>
<dd data="self_media_auth_subject">
<a href="#" style='color: #888;'>账号主体</a>
</dd>
</dl>
</li>
<li class="select-list">
<dl id="select2">
<dt style="margin-left: -10px;">账号来源：</dt>
<dd data="self_media_wechat_number" class="select-all selected">
<a href="#" style='color: #888;'>公众号</a>
</dd>
<dd data="self_media_bd_baijiahao">
<a href="#" style='color: #888;'>百家号</a>
</dd>
</dl>
</li>
<li class="select-list"
style="float: right; margin-top: -8.4rem; width: 30%; margin-right: 240px;">
<dl id="select3">
<dt>排序方式：</dt>
<dd data="self_media_crawler_time" class="select-all selected">
<a href="#" style='color: #888;'>更新时间</a>
</dd>
<dd data="self_media_info_crawler_time">
<a href="#" style='color: #888;'>发文时间</a>
</dd>
<dd data="mediaIndex">
<a href="#" style='color: #888;'>账号指数</a>
</dd>
</dl>
</li>
<li class="select-result">
<dl>
<dt style="margin-left: -10px;">已选条件：</dt>
<dd class="select-no">暂时没有选择过滤条件</dd>
</dl>
</li>
<li
style="float: right; width: 26%; margin-top: -51px; color: #888;">
<dl>
<dt style="width: 280px; color: #888;">
查询出符合要求的数据量：<span id="AllTotal" style='color: #888;'>${AllTotal}
</span>
</dt>
</dl>
</li>
</ul>
</div>
</div>
</div>
</div>
**示例代码**可以点击下载按钮，进行下载
