jQuery多条件分类筛选查询代码

新建html文档。

书写hmtl代码。

书写css代码。* { font-size: 12px; }.sel article { border-bottom: 1px dashed #e9e9e9; }.sel article aside { width: 10%; text-align: right; height: 34px; line-height: 34px; float: left; }.sel article section { float: right; width: 145px; margin: 7px 0; }.sel article section a { text-decoration: none; border: 1px solid #E0DEDE; padding: 3px; margin: 5px; border-radius: 5px; }.sel article section a:hover { text-decoration: none; color: orange; }.sel article section .open i.fa-chevron-down { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }.jzq { height: 34px; overflow: hidden; width: 65%; }.jzq p a { padding-top: 2px; margin: 7px 0; height: 22px; display: inline-block; width: 20%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }.jzq p a:hover { text-decoration: none; color: orange; }.divMulti { height: auto; border: 1px dashed #e9e9e9; padding: 2px; }.ch { border: 1px solid #999999; width: 14px; height: 14px; margin-right: 5px; display: inline-block; vertical-align: middle; font-size: 0; }.chbackground { background: url(../img/small-icon.png)-3px -64px; }.multiBtn { padding-bottom: 5px; text-align: center; }.multiBtn button { margin: 0px 5px 0px 5px; }.yixuan { width: 100%; background: #E0DEDE; min-height: 40px; padding: 10px 0px 10px 0px; }.yixuanNavList a { border: 1px dashed #e6e6e6; background: #fff; color: #999; line-height: 20px; height: 20px; display: inline-block; margin: 0 0 12px 10px; padding: 0px 2px 0px 2px; }.yixuanNavList a:hover { text-decoration: none; border-color: #f49871; color: #f49871; cursor: pointer; }.yixuanNavList .tit-close { font-size: 14px; margin-left: 5px; }

书写并添加js代码。

代码整体结构。

查看效果。