html:
<div class="filter-content filter-content-border" id="bubbleFilter"> <div class="filter-item clearfix"> <label class="filter-label">区域：</label> <div class="data-list"> <a class="item-a" data-type="l" data-id="all" data-url="" href="javascript:void(0);">全部</a> <a class="item-a" data-type="l" data-id="1" data-url="" href="javascript:void(0);">樊城区</a> <a class="item-a" data-type="l" data-id="2" data-url="" href="javascript:void(0);">樊城区</a> <a class="item-a" data-type="l" data-id="3" data-url="" href="javascript:void(0);">樊城区</a> <a class="item-a" data-type="l" data-id="4" data-url="" href="javascript:void(0);">樊城区</a> <a class="item-a" data-type="l" data-id="5" data-url="" href="javascript:void(0);">樊城区</a> <a class="item-a" data-type="l" data-id="6" data-url="" href="javascript:void(0);">谷城</a> <a class="item-a" data-type="l" data-id="7" data-url="" href="javascript:void(0);">樊城区</a> <a class="item-a" data-type="l" data-id="8" data-url="" href="javascript:void(0);">樊城区</a> <a class="item-a" data-type="l" data-id="9" data-url="" href="javascript:void(0);">樊城区</a> <a class="item-a" data-type="l" data-id="10" data-url="" href="javascript:void(0);">樊城区</a> <a class="item-a" data-type="l" data-id="11" data-url="" href="javascript:void(0);">樊城区</a> <a class="item-a" data-type="l" data-id="12" data-url="" href="javascript:void(0);">樊城</a> <a class="item-a" data-type="l" data-id="13" data-url="" href="javascript:void(0);">樊城区</a> <a class="item-a" data-type="l" data-id="14" data-url="" href="javascript:void(0);">樊城襄州</a> <a class="item-a" data-type="l" data-id="15" data-url="" href="javascript:void(0);">樊城</a> <a class="item-a" data-type="l" data-id="16" data-url="" href="javascript:void(0);">樊城</a> </div> </div> <!-- <div class="filter-regin clearfix"> <div class="data-list"> <a href="#no" class="actived">全部</a> <a href="javascript:void(0);">樊城</a> <a href="javascript:void(0);">华丰路</a> <a href="javascript:void(0);">火车站</a> <a href="javascript:void(0);">华洋堂</a> <a href="javascript:void(0);">人民广场</a> <a href="javascript:void(0);">沃尔玛</a> <a href="javascript:void(0);">万达广场</a> <a href="javascript:void(0);">沿江大道</a> </div> </div> --> <!-- <div class="filter-item clearfix"> <label class="filter-label">地铁：</label> <div class="data-list"> <a href="javascript:void(0);">全部</a> <a href="javascript:void(0);" class="actived">一号线</a> </div> </div> --> <div class="filter-item clearfix"> <label class="filter-label">价格：</label> <div class="data-list"> <a class="data-tab actived" href="javascript:;">单价<em class="iconfont"></em></a> <a class="data-tab" href="javascript:;">总价<em class="iconfont"></em></a> </div> <div class="data-list data-tab-item"> <a class="item-a" data-type="u" data-id="all" data-url="" href="javascript:void(0);">全部</a> <a class="item-a" data-type="u" data-id="1" data-url="" href="javascript:void(0);">20000以下</a> <a class="item-a" data-type="u" data-id="2" data-url="" href="javascript:void(0);">20000-30000</a> <a class="item-a" data-type="u" data-id="3" data-url="" href="javascript:void(0);">100000以上</a> <span>单价(元/平)</span> <!-- <input type="text" id="unitPriceFloor" value=""> <span>-</span> <input type="text" id="unitPriceCeil" value=""> <input type="button" value="确定" id="unitPriceBtn"> --> </div> <div class="data-list data-tab-item hide"> <a class="item-a" data-type="t" data-id="all" data-url="" href="javascript:void(0);">全部</a> <a class="item-a" data-type="t" data-id="1" data-url="" href="javascript:void(0);">100万以下</a> <a class="item-a" data-type="t" data-id="2" data-url="" href="javascript:void(0);">100-300</a> <a class="item-a" data-type="t" data-id="3" data-url="" href="javascript:void(0);">300-500</a> <a class="item-a" data-type="t" data-id="4" data-url="" href="javascript:void(0);">500-800</a> <a class="item-a" data-type="t" data-id="5" data-url="" href="javascript:void(0);">800-1000</a> <a class="item-a" data-type="t" data-id="6" data-url="" href="javascript:void(0);">1000-2000</a> <a class="item-a" data-type="t" data-id="7" data-url="" href="javascript:void(0);">2000万以上</a> <span>总价(万元)</span> <!-- <input type="text" id="totalPriceFloor" value=""> <span>-</span> <input type="text" id="totalPriceCeil" value=""> <input type="button" value="确定" id="totalPriceBtn"> --> </div> </div> <div class="filter-item clearfix"> <label class="filter-label">户型：</label> <div class="data-list"> <a class="item-a" data-type="h" data-id="all" data-url="" href="javascript:void(0);">全部</a> <a class="item-a multi-item" data-type="h" data-id="1" data-url="" href="javascript:void(0);"><i></i>一居</a> <a class="item-a multi-item" data-type="h" data-id="2" data-url="" href="javascript:void(0);"><i></i>两居</a> <a class="item-a multi-item" data-type="h" data-id="3" data-url="" href="javascript:void(0);"><i></i>三居</a> <a class="item-a multi-item" data-type="h" data-id="4" data-url="" href="javascript:void(0);"><i></i>四居</a> <a class="item-a multi-item" data-type="h" data-id="5" data-url="" href="javascript:void(0);"><i></i>五居</a> <a class="item-a multi-item" data-type="h" data-id="6" data-url="" href="javascript:void(0);"><i></i>五居以上</a> </div> </div> <!-- <div class="filter-item clearfix"> <label class="filter-label">面积：</label> <div class="data-list"> <a href="javascript:void(0);" class="actived">全部</a> <a href="javascript:void(0);"><i></i>60m²以下</a> <a href="javascript:void(0);"><i></i>60-80m²</a> <a href="javascript:void(0);"><i></i>80-100m²</a> <a href="javascript:void(0);"><i></i>100-120m²</a> <a href="javascript:void(0);"><i></i>120-150m²</a> <a href="javascript:void(0);"><i></i>150-200m²</a> <a href="javascript:void(0);"><i></i>200m²以上</a> </div> </div> --> <div class="filter-item more-filter clearfix"> <label class="filter-label">更多：</label> <div class="select-filter"> <div class="select-status"> <span>建造年代</span> <i class="select-icon"></i> <input type="hidden" class="hiddenId" value=""> </div> <div class="select-list"> <a class="item-a" data-type="j" data-id="all" data-url="" href="javascript:void(0);">全部</a> <a class="item-a" data-type="j" data-id="1" data-url="" href="javascript:void(0);">2010以后</a> <a class="item-a" data-type="j" data-id="2" data-url="" href="javascript:void(0);">2005-2010</a> <a class="item-a" data-type="j" data-id="3" data-url="" href="javascript:void(0);">2000-2005</a> <a class="item-a" data-type="j" data-id="4" data-url="" href="javascript:void(0);">2000以前</a> </div> </div> <div class="select-filter"> <div class="select-status"> <span>物业类型</span> <i class="select-icon"></i> <input type="hidden" class="hiddenId" value=""> </div> <div class="select-list"> <a class="item-a" data-type="w" data-id="all" data-url="" href="javascript:void(0);">全部</a> <a class="item-a" data-type="w" data-id="1" data-url="" href="javascript:void(0);">住宅</a> <a class="item-a" data-type="w" data-id="2" data-url="" href="javascript:void(0);">商铺</a> <a class="item-a" data-type="w" data-id="3" data-url="" href="javascript:void(0);">别墅</a> <a class="item-a" data-type="w" data-id="4" data-url="" href="javascript:void(0);">写字楼</a> </div> </div> <div class="select-filter"> <div class="select-status"> <span>特色</span> <i class="select-icon"></i> <input type="hidden" class="hiddenId" value=""> </div> <div class="select-list"> <a class="item-a" data-type="f" data-id="all" data-url="" href="javascript:void(0);">全部</a> <a class="item-a" data-type="f" data-id="1" data-url="" href="javascript:void(0);">小户型</a> <a class="item-a" data-type="f" data-id="2" data-url="" href="javascript:void(0);">低总价</a> </div> </div> <div class="select-filter"> <div class="select-status"> <span>装修状况</span> <i class="select-icon"></i> <input type="hidden" class="hiddenId" value=""> </div> <div class="select-list"> <a class="item-a" data-type="d" data-id="all" data-url="" href="javascript:void(0);">全部</a> <a class="item-a" data-type="d" data-id="1" data-url="" href="javascript:void(0);">毛坯</a> <a class="item-a" data-type="d" data-id="2" data-url="" href="javascript:void(0);">简装修</a> <a class="item-a" data-type="d" data-id="3" data-url="" href="javascript:void(0);">带装修</a> </div> </div> </div> <!-- <div class="filter-item current-filter clearfix"> <span class="fl">当前条件:</span> <div class="filter-selected fl"> <a href="javascript:void(0);" class="selected-item">樊城区</a> <a href="javascript:void(0);" class="selected-item">一号线</a> <a href="javascript:void(0);" class="selected-item">一居</a> </div> <a href="javascript:void(0);" class="filter-clear">清空全部</a> </div> --> <a class="filter-clear-all" href="/pages/esf/list.html">清空全部条件</a> </div>
js:
(function ($) { FCZX.globalNamespace('FCZX.list.Filter'); FCZX.list.Filter = function (opt) { this._init(opt); } $.extend(FCZX.list.Filter.prototype, { _init: function (opt) { this.opt = { filterSelecor: '#bubbleFilter', itemSelector: '.item-a', tabSelector: '.data-tab', //扩展可能会有多个 tabDataSelector: '.data-tab-item', selectSelector: '.select-filter' } $.extend(true, this.opt, opt || {}); this._initDomEvent(); }, _initDomEvent: function () { let _this = this; let _opt = _this.opt; _opt.$filter = $(_opt.filterSelecor); _opt.$item = $(`${_opt.filterSelecor} ${_opt.itemSelector}`); _opt.$tab = $(_opt.tabSelector); _opt.$tabData = $(_opt.tabDataSelector); _this._initDomStatus(); _this._tabShowEvent(_opt.$tab, _opt.$tabData); _opt.$filter.find(_opt.selectSelector).each(function () { $(this).hover(function () { $(this).find('.select-list').show(); }, function () { $(this).find('.select-list').hide(); }) }) _opt.$filter.click(function (event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } let target = event.target || event.srcElement; let tagName = event.target.tagName; let $target = $(target); if (tagName == 'SPAN') { return }; if ($target.hasClass('filter-clear-all')) { window.location.href = $target.attr('href'); return } if ($target.hasClass('multi-item')) { _this._multiSelectItem($target); } else if ($target.parent().hasClass('multi-item')) { _this._multiSelectItem($target.parent()); } else if ($target.parent().hasClass('data-tab-item')) { let switchs = [] for (let i = 0; i < $('.data-tab-item').length; i++) { switchs.push($('.data-tab-item').eq(i).find('.item-a').eq(0).data('type')) } _this._switchSelectItem($target, switchs); } else { _this._singleSelectItem($target); } }); }, _initDomStatus: function () { let _this = this; let _opt = _this.opt; let dataUrl = window.location.search; let urlParams = transferUrlParam(dataUrl); _opt.$item.each(function () { let $this = $(this); $this.attr('data-url', dataUrl); let dataId = $this.data('id'); let dataType = $this.data('type'); let activedId = urlParams[dataType]; if (!activedId) { $(`${_opt.itemSelector}[data-type=${dataType}]`).eq(0).addClass('actived'); } else { if ($this.hasClass('multi-item')) { for (const itemId of activedId.split(',')) { if (dataId == itemId) { $this.addClass('actived'); } } } else if ($this.parent().hasClass('data-tab-item')) { if (dataId == activedId) { $this.addClass('actived'); if (!$this.parent().is(":visible")) { let index = $('.data-tab-item').index($this.parent()); $('.data-tab').removeClass('actived'); $('.data-tab').eq(index).addClass('actived'); $('.data-tab-item').hide(); $this.parent().show(); } } } else if ($this.parent().hasClass('select-list')) { if (dataId == activedId) { let selectStatus = $this.parent().siblings(); selectStatus.find('span').text($this.text()); selectStatus.find('input').val(dataId); $this.addClass('actived'); } } else { if (dataId == activedId) { $this.addClass('actived'); } } } }) }, _singleSelectItem: function ($target) { let _this = this; let dataId = $target.data('id'); let dataType = $target.data('type'); let dataUrl = $target.data('url'); let urlParamObj = transferUrlParam(dataUrl); if (!dataType) { return } if (dataId == 'all') { delete urlParamObj[dataType]; } else { urlParamObj[dataType] = dataId; } let newDataUrl = toUrlParam(urlParamObj); _this._setDataUrl(newDataUrl); }, _multiSelectItem: function ($target) { let _this = this; let dataId = $target.data('id'); let dataType = $target.data('type'); let dataUrl = $target.data('url'); let urlParamObj = transferUrlParam(dataUrl); let currUrlParam = urlParamObj[dataType]; if (currUrlParam) { let paramList = currUrlParam.split(','); let index = paramList.indexOf(`${dataId}`); if (index > -1) { paramList.splice(index, 1); if (paramList.length <= 0) { delete urlParamObj[dataType]; } else { urlParamObj[dataType] = paramList.sort().join(','); } } else { paramList.push(`${dataId}`); urlParamObj[dataType] = paramList.sort().join(','); } } else { urlParamObj[dataType] = dataId; } let newDataUrl = toUrlParam(urlParamObj); _this._setDataUrl(newDataUrl); }, _switchSelectItem: function ($target, switchs) { let _this = this; let dataId = $target.data('id'); let dataType = $target.data('type'); let dataUrl = $target.data('url'); let urlParamObj = transferUrlParam(dataUrl); for (const item of switchs) { delete urlParamObj[item]; } if (dataId != 'all') { urlParamObj[dataType] = dataId; } let newDataUrl = toUrlParam(urlParamObj); _this._setDataUrl(newDataUrl); }, _setDataUrl: function (dataUrl) { let _this = this; let _opt = _this.opt; _opt.$item.data('url', dataUrl); window.location.href = `http://${window.location.host}${window.location.pathname}${dataUrl}`; }, _tabShowEvent: function (tab, tabData) { tab.on('mouseenter', function () { $(this).siblings().removeClass('actived'); $(this).addClass('actived'); let index = $(this).index(); tabData.hide(); tabData.eq(index).show(); }); } }) })(jQuery);
使用：
new FCZX.list.Filter({ filterSelecor: '#bubbleFilter', itemSelector: '.item-a', tabSelector: '.data-tab', tabDataSelector: '.data-tab-item', selectSelector: '.select-filter' });
图例：
