<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js多项筛选功能</title>
<style>
dl,
dd {
margin: 0;
}
#boxSeach {
850px;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 10px rgba(73,66,66,.1);
margin: 50px auto;
border: 1px solid #E5E5E5;
padding-left: 120px;
}
#boxSeach dl {
line-height: 30px;
/* border-bottom: 1px dashed #dadada; */
margin: 0 20px;
display: inline-block;
position: relative;
}
#boxSeach dt {
float: left;
color: #8a8a8a;
}
#boxSeach dd {
float: left;
color: #252525;
margin: 0 10px;
font-size: 14px;
cursor: pointer;
}
#boxSeach dd.active {
color: #E24B36;
font-weight: bold;
}
#boxSeach dl.select {
background: #efefef;
margin: 0;
padding: 0 20px;
margin-left: 20px;
}
#boxSeach dl.select dd{
border: 1px solid #E24B36;
height: 25px;
line-height: 25px;
margin-top: 13px;
padding: 0 2px 0 10px;
border-radius: 3px;background-color: #fff;
margin: 5px;
}
#boxSeach dl.select dd span{
20px;
height: 20px;
display: inline-block;
text-align: center;
line-height: 20px;
background: #E24B36;
color: #fff;
margin-left: 10px;
cursor: pointer;border-radius: 5px;
}
#boxSeach .falstTitle {
position: absolute;
left: -120px;
}
</style>
</head>
<body>
<div id="boxSeach">
<dl>
<div class="falstTitle">开放档案目录：</div>
<dt>市、区档案馆开放档案目录：</dt>
<dl>
<dd>市档案馆开放档案</dd>
<dd>普陀区档案馆</dd>
<dd>徐汇区档案馆</dd>
<dd>宝山区档案馆</dd>
<dd>奉贤区档案馆</dd>
<dd>虹口区档案馆</dd>
<dd>松江区档案馆</dd>
<dd>长宁区档案馆</dd>
<dd>金山区档案馆</dd>
<dd>上海市崇明区档案馆</dd>
<dd>黄浦区档案馆</dd>
<dd>杨浦区档案馆</dd>
<dd>青浦区档案馆</dd>
<dd>静安区档案馆</dd>
<dd>闵行区档案馆</dd>
<dd>上海市徐汇区档案馆</dd>
<dd>浦东新区档案馆</dd>
<dd>嘉定区档案馆</dd>
</dl>
</dl>
<dl>
<div class="falstTitle">专题档案目录：</div>
<dt>专题档案目录：</dt>
<dl>
<dd>市档案馆老字号目录</dd>
<dd>区档案馆老字号目录</dd>
<dd>老字号企业档案目录</dd>
</dl>
</dl>
<div>
<dl class="select" style="border-bottom- 0px;">
<dt>已选条件：</dt>
</dl>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
var dls = document.querySelectorAll('dl:not(.select)');
var selected=document.querySelector('.select');
for (var i = 0; i < dls.length; i++) {
dls[i].mark=false; //给每一行的dl标签添加一条属性，用于对应下面的dd标签。我们约定如果这个属性的值为true表示对应的标签没有创建。如果值为false表示对应的标签已经创建了
select(i);
}
function select(n) {
var dds = dls[n].querySelectorAll('dd');
var prev=null;
var dd=null; //每一行都需要创建一个dd标签，放到这里是为了如果标签已经被创建了，通过这个变量能够找到这个标签
for (var i = 0; i < dds.length; i++) {
dds[i].onclick = function () {
// console.log($('.select').text(),'值')
//给当前点击的添加一个高亮
//prev && (prev.className = '');
if(prev){
prev.className = ''
}
this.className = 'active';
prev = this;
//创建dd标签
var parent=this.parentNode;
if(!parent.mark){ //这个条件满足说明对应的dd标签还没有创建
dd=document.createElement('dd');
dd.innerHTML=this.innerHTML;
selected.appendChild(dd);
parent.mark=true;
var textVal = $('.select dd').text();
textVal = textVal.split("X");
console.log(textVal,'textVal')
}else{
//走这里的时候说明对应的标签已经创建了，只需要把内容修改了就可以了
dd.innerHTML=this.innerHTML;
}
var span=document.createElement('span');
var This=this;
span.innerHTML='X';
span.onclick=function(){
//alert(1);
/*
点击关闭后要做的事情
1、移除掉dd
2、把上面点击的那个class去掉
3、父级身上的mark属性要更新
*/
selected.removeChild(dd);
This.className='';
parent.mark=false;
};
dd.appendChild(span);
};
}
}
</script>
</body>
</html>