'use strict';
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
(function (global, factory) {
global.FilterBar = factory(global);
})(typeof window !== 'undefined' ? window : undefined, function (window) {
/**
* 筛选条插件类
*
* @class FilterBar
*/
var FilterBar = function () {
/**
* 创建实例
*
* @param {any} config
* @memberof FilterBar
*/
function FilterBar(config, doneCallback) {
_classCallCheck(this, FilterBar);
this.log('init!');
this.config = config;
this.cache = [];
this.lastFocusGroup = '';
this.emptyHtml = '<p class="filter-nodata">该筛选项无数据，请重新选择筛选条件！</p>';
this.init();
document.documentElement.classList.remove('filter-shown');
document.body.classList.remove('filter-shown');
if (typeof doneCallback === 'function') {
doneCallback();
}
}
/**
* 打印调试日志
* 仅debug=true启用
*
* @param {any} msg
* @memberof FilterBar
*/
_createClass(FilterBar, [{
key: 'log',
value: function log() {
if (FilterBar.debug) {
var _console;
(_console = console).log.apply(_console, arguments);
}
}
/**
* 将NodeList转为数组
*
* @param {any} obj
* @memberof FilterBar
*/
}, {
key: 'toArray',
value: function toArray(obj) {
return Array.prototype.slice.call(obj);
}
/**
* 初始化方法
*
* @memberof FilterBar
*/
}, {
key: 'init',
value: function init() {
this.renderTabs();
this.renderPanels();
this.renderMask();
}
/**
* 渲染Tabs元素
*
* @memberof FilterBar
*/
}, {
key: 'renderTabs',
value: function renderTabs() {
var _this = this;
this.log('渲染Tabs');
var wrap = document.createElement('div');
wrap.classList.add('filter-wrap');
this.config.forEach(function (_ref, index) {
var data = _ref.data,
tabName = _ref.tabName,
selectedData = _ref.selectedData,
customSelected = _ref.customSelected,
callback = _ref.callback;
var tab = document.createElement('div');
tab.id = 'filter-tab-' + index;
tab.classList.add('filter-tab');
// 无展开面板的形式
if (typeof data === 'undefined') {
tab.classList.add('filter-tab-radio');
}
tab.addEventListener('click', function () {
if (typeof data !== 'undefined') {
// 切换显示普通列表
if (tab.classList.contains('on')) {
_this.hidePanel();
} else {
_this.showPanel(index);
}
} else {
// 该tab被认为是单击切换选中
tab.classList.toggle('selected');
_this.hidePanel();
callback({
selected: tab.classList.contains('selected'),
type: FilterBar.cbEnum.confirm,
ext: index
});
}
});
tab.innerHTML = '<div><span>' + tabName + '</span></div>';
var hasSelected = false;
// 判断是否已有选中
if (typeof selectedData === 'boolean') {
hasSelected = selectedData;
} else if (typeof selectedData === 'string') {
if (selectedData) {
hasSelected = true;
}
} else if (Array.isArray(selectedData)) {
if (selectedData.length) {
hasSelected = true;
}
} else if ((typeof selectedData === 'undefined' ? 'undefined' : _typeof(selectedData)) === 'object') {
if (Object.keys(selectedData).length) {
hasSelected = true;
}
}
_this.log('renderTabs - hasSelected=' + hasSelected);
// 普通筛选项有选中，或者自定义面板包含了选中项
if (hasSelected || customSelected) {
tab.classList.add('selected');
}
wrap.appendChild(tab);
});
if (!document.querySelector('.filter-wrap')) {
this.log('第一次初始化');
// 如果是第一次初始化
document.body.appendChild(wrap);
} else {
this.log('wrap已存在，重新初始化');
// 重新初始化
var frag = document.createDocumentFragment();
this.toArray(wrap.querySelectorAll('.filter-tab')).forEach(function (tab) {
return frag.appendChild(tab);
});
// 原有的tab全部移除
this.toArray(document.querySelectorAll('.filter-wrap .filter-tab')).forEach(function (tab) {
return tab.remove();
});
// 添加新的tab
document.querySelector('.filter-wrap').appendChild(frag);
// 原有的面板全部移除
this.toArray(document.querySelectorAll('.filter-panel')).forEach(function (panel) {
return panel.remove();
});
}
}
/**
* 渲染下拉面板
*
* @memberof FilterBar
*/
}, {
key: 'renderPanels',
value: function renderPanels() {
var _this2 = this;
this.log('渲染Panels');
this.config.forEach(function (_ref2, index) {
var data = _ref2.data;
if (typeof data !== 'undefined') {
// 弹出列表的形式
if (data[0] && data[0].groupCode) {
// 多列筛选
_this2.renderComplexPanel(index);
} else {
if (_this2.config[index].multi) {
// 单列多选
_this2.renderSinglePanel2(index);
} else {
// 单列单选
_this2.renderSinglePanel1(index);
}
}
}
});
}
/**
* 使用新的参数重置筛选
*
* @memberof FilterBar
*/
}, {
key: 'reset',
value: function reset(params) {
var _this3 = this;
if (params.type === FilterBar.cbEnum.confirm) {
// 如果是通过点击确定进行的重置，则更新全部面板
this.log('reset所有面板');
this.config = params.config;
this.config.forEach(function (conf, index) {
_this3.resetOnePanel(conf, index);
// 设置面板样式
var panel = document.querySelector('#filter-panel-' + index);
_this3.initPanelStyle(panel, index);
});
} else {
// 否则仅更新所操作的面板
this.log('\u4EC5reset\u7B2C' + params.ext + '\u4E2A\u9762\u677F');
this.config[params.ext] = params.config[params.ext];
this.resetOnePanel(params.config[params.ext], params.ext);
}
}
/**
* 重置指定面板
*
* @param {any} conf
* @param {any} index
* @memberof FilterBar
*/
}, {
key: 'resetOnePanel',
value: function resetOnePanel(conf, index) {
this.log('\u5F00\u59CBreset\u9762\u677F' + index);
var data = conf.data,
selectedData = conf.selectedData,
customSelected = conf.customSelected;
// 重新确定tab是否高亮
var hasSelected = false;
var tab = document.querySelector('#filter-tab-' + index);
// 判断是否已有选中
if (typeof selectedData === 'string') {
if (selectedData) {
hasSelected = true;
}
} else if (Array.isArray(selectedData)) {
if (selectedData.length) {
hasSelected = true;
}
} else if ((typeof selectedData === 'undefined' ? 'undefined' : _typeof(selectedData)) === 'object') {
if (Object.keys(selectedData).length) {
hasSelected = true;
}
}
// 普通筛选项有选中，或者自定义面板包含了选中项
if (hasSelected || customSelected) {
tab.classList.add('selected');
} else {
tab.classList.remove('selected');
}
// 重新构建筛选项
if (typeof data === 'undefined') {
// 无列表的形式，例如门票筛选的"今日可订"
} else if (Array.isArray(data) && data[0] && data[0].groupCode) {
// 多列筛选
this.resetComplexPanel(index);
} else if (this.config[index].multi) {
// 单列多选
this.resetSinglePanel2(index);
} else {
// 单列单选
this.resetSinglePanel1(index);
}
}
/**
* 计算面板的确定高度
*
* @param {any} index
* @returns
* @memberof FilterBar
*/
}, {
key: 'calculateHeight',
value: function calculateHeight(index) {
var height = 0;
var panel = document.querySelector('#filter-panel-' + index);
// 根据屏幕的高度，设置一个最大高度，以尽可能多的展示内容
var maxHeight = window.innerHeight - document.querySelector('.filter-wrap').offsetTop - 45 - 90;
if (panel.classList.contains('complex')) {
// 复杂面板，高度定死，使用最大高度
height = maxHeight;
} else if (panel.classList.contains('multi')) {
// 多选面板
var lines = this.config[index].data.length;
if (lines) {
height = lines * 45 + 47;
} else {
height = 137;
}
if (height > maxHeight) {
height = maxHeight;
}
} else {
// 单列单选面板
var _lines = this.config[index].data.length;
if (_lines) {
height = _lines * 45;
} else {
height = 137;
}
if (height > maxHeight) {
height = maxHeight;
}
}
this.log('\u8BA1\u7B97\u5F97\u5230\u9762\u677F\u56FA\u5B9A\u9AD8\u5EA6\u4E3A' + height + 'px');
return height;
}
/**
* 初始化面板样式
*
* @param {any} panel
* @param {any} index
* @memberof FilterBar
*/
}, {
key: 'initPanelStyle',
value: function initPanelStyle(panel, index) {
var data = this.config[index].data;
var height = this.calculateHeight(index);
panel.style.height = height + 'px';
panel.style.transform = 'translate3d(0px, -' + (height + 1) + 'px, 0px)';
panel.style.webkitTransform = 'translate3d(0px, -' + (height + 1) + 'px, 0px)';
var ul = void 0;
if (data[0] && data[0].groupCode) {
// 多列筛选
ul = panel.querySelector('.filter-ul');
} else if (this.config[index].multi) {
// 单列多选
ul = panel.querySelector('ul');
}
if (ul) {
ul.style.height = height - 47 + 'px';
}
}
/**
* 渲染蒙层
*
* @memberof FilterBar
*/
}, {
key: 'renderMask',
value: function renderMask() {
var _this4 = this;
this.log('渲染蒙层');
var mask = document.querySelector('.filter-mask');
if (!mask) {
var _mask = document.createElement('div');
_mask.classList.add('filter-mask');
_mask.addEventListener('click', function () {
_this4.hidePanel();
});
document.body.appendChild(_mask);
}
}
/**
* 显示面板
*
* @param {number} index - tab的次序
* @memberof FilterBar
*/
}, {
key: 'showPanel',
value: function showPanel(index) {
var _this5 = this;
this.log('\u663E\u793A\u9762\u677F' + index);
var panel = document.querySelector('#filter-panel-' + index);
var opendPanel = document.querySelector('.filter-panel.on');
// 如果当前已有打开的面板，则先隐藏
if (opendPanel) {
this.hidePanel(false);
}
panel.classList.add('on');
panel.style.display = 'block';
setTimeout(function () {
panel.style.transform = 'translate3d(0, 0, 0)';
panel.style.webkitTransform = 'translate3d(0, 0, 0)';
}, 0);
var tab = document.querySelector('#filter-tab-' + index);
tab.classList.add('on');
// 禁止屏幕滚动
document.documentElement.classList.add('filter-shown');
document.body.classList.add('filter-shown');
setTimeout(function () {
_this5.log('重新启用面板动画');
panel.style.transitionDuration = '.3s';
panel.style.webkitTransitionDuration = '.3s';
}, 0);
}
/**
* 隐藏面板
*
* @param {boolean} [animate=true] - 是否显示动画
* @param {boolean} [cb=true] - 是否调用回调函数
* @memberof FilterBar
*/
}, {
key: 'hidePanel',
value: function hidePanel() {
var _this6 = this;
var animate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
var cb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
this.log('隐藏面板');
var opendPanel = document.querySelector('.filter-panel.on');
if (opendPanel) {
var opendPanelHeight = parseInt(opendPanel.style.height.split("px")[0]);
var opendIndex = opendPanel.dataset.index;
var opendTab = document.querySelector('#filter-tab-' + opendIndex);
if (!animate) {
this.log('停用面板动画');
opendPanel.style.transitionDuration = '0s';
opendPanel.style.webkitTransitionDuration = '0s';
}
opendPanel.style.transform = 'translate3d(0, -' + (opendPanelHeight + 1) + 'px, 0)';
opendPanel.style.webkitTransform = 'translate3d(0, -' + (opendPanelHeight + 1) + 'px, 0)';
opendPanel.classList.remove('on');
opendTab.classList.remove('on');
// 开启屏幕滚动
document.documentElement.classList.remove('filter-shown');
document.body.classList.remove('filter-shown');
// 如果没有数据则直接退出
var data = this.config[opendIndex].data;
if (Array.isArray(data) && data.length === 0) {
return;
}
// 收起之后，隐藏面板，并从缓存中恢复已选项，覆盖暂选项
if (!animate) {
// opendPanel.style.display = 'none';
this.restoreFilter(opendIndex, cb);
} else {
setTimeout(function () {
// opendPanel.style.display = 'none';
_this6.restoreFilter(opendIndex, cb);
}, 300);
}
}
}
/**
* 从缓存中恢复已选项
*
* @param {number} index
* @memberof FilterBar
*/
}, {
key: 'restoreFilter',
value: function restoreFilter(index, cb) {
var _this7 = this;
this.log('\u6E05\u9664\u4E34\u65F6\u9009\u62E9\u7684\u6570\u636E\uFF0C\u6062\u590D\u9762\u677F' + index + '\u7684\u4E0A\u6B21\u5DF2\u786E\u8BA4\u6570\u636E', this.cache[index]);
var selected = this.cache[index];
var tab = document.querySelector('#filter-tab-' + index);
if (Array.isArray(selected)) {
// 单列多选
var lis = document.querySelectorAll('#filter-panel-' + index + ' li');
this.toArray(lis).forEach(function (li) {
var code = li.dataset.code;
if (selected.indexOf(code) >= 0 || selected.length === 0 && !code) {
li.classList.add('selected');
} else {
li.classList.remove('selected');
}
});
// 改变tab样式
if (selected.length) {
tab.classList.add('selected');
} else {
tab.classList.remove('selected');
}
// 回到顶部
var ul = document.querySelector('#filter-panel-' + index + ' ul');
if (ul) {
ul.scrollTop = 0;
}
} else if ((typeof selected === 'undefined' ? 'undefined' : _typeof(selected)) === 'object') {
// 多列
var panel = document.querySelectorAll('#filter-panel-' + index + ' .filter-ul>li');
this.toArray(panel).forEach(function (groupLi) {
var filterTxt = [];
var groupCode = groupLi.dataset.code;
_this7.toArray(groupLi.querySelectorAll('.filter-sub-ul li')).forEach(function (subLi) {
if (!selected[groupCode] && (!subLi.dataset.code || subLi.dataset.code === '不限') && !subLi.classList.contains('filter-sec-wrap')) {
subLi.classList.add('selected');
} else if (selected[groupCode] && selected[groupCode].indexOf(subLi.dataset.code) >= 0) {
subLi.classList.add('selected');
if (!subLi.classList.contains('filter-sec-li')) {
// 普通li
filterTxt.push(subLi.querySelector('span').textContent);
} else {
// 子面板的li
var forcode = subLi.parentElement.parentElement.dataset.forcode;
groupLi.querySelector('.filter-sub-li[data-code="' + forcode + '"]').classList.add('selected');
var subTitle = '';
var itemName = subLi.querySelector('span').textContent;
if (itemName === '不限') {
// 第一项默认为不限
subTitle = forcode;
} else {
subTitle = forcode + '-' + itemName;
}
filterTxt.push(subTitle);
}
} else {
subLi.classList.remove('selected');
}
});
groupLi.querySelector('.filter-title i').textContent = filterTxt.join('、');
});
// 改变tab样式
if (Object.keys(selected).length) {
tab.classList.add('selected');
} else {
tab.classList.remove('selected');
}
// 收起已展开的筛选
this.toArray(document.querySelectorAll('#filter-panel-' + index + ' .filter-more.opend')).forEach(function (more) {
more.classList.remove('opend');
var subUl = more.parentElement.nextElementSibling;
subUl.style.maxHeight = '40px';
});
// 回到顶部
var _ul = document.querySelector('#filter-panel-' + index + ' .filter-ul');
if (_ul) {
_ul.scrollTop = 0;
}
// 上次点击的组置空
this.lastFocusGroup = '';
}
// 执行回调
if (cb) {
this.config[index].callback({
selected: selected,
type: FilterBar.cbEnum.cancel,
ext: index
});
}
}
/**
* 初始化单列单选列表
*
* @param {number} index - 筛选tab次序
* @memberof FilterBar
*/
}, {
key: 'renderSinglePanel1',
value: function renderSinglePanel1(index) {
var _this8 = this;
this.log('\u521D\u59CB\u5316\u5355\u9009\u9762\u677F' + index);
var render = function render(panel) {
if (!_this8.config[index].data.length) {
// 如果不存在筛选
panel.innerHTML = _this8.emptyHtml;
} else {
var ul = document.createElement('ul');
// 初始化单列单选列表的项
_this8.initSinglePanel1Items(index, ul);
panel.appendChild(ul);
}
};
var panel = void 0;
if (!document.querySelector('#filter-panel-' + index)) {
// 不存在则创建面板
panel = document.createElement('div');
panel.id = 'filter-panel-' + index;
panel.classList.add('filter-panel');
panel.dataset.index = index;
render(panel);
document.querySelector('.filter-wrap').appendChild(panel);
} else {
panel = document.querySelector('#filter-panel-' + index);
panel.innerHTML = '';
render(panel);
}
// 设置面板样式
this.initPanelStyle(panel, index);
// 将已选项存入缓存
this.cache[index] = this.config[index].selectedData;
}
/**
* 重置单列单选列表
*
* @param {number} index - 筛选tab次序
* @memberof FilterBar
*/
}, {
key: 'resetSinglePanel1',
value: function resetSinglePanel1(index) {
this.log('\u91CD\u7F6E\u5355\u9009\u9762\u677F' + index);
var ul = document.querySelector('#filter-panel-' + index + ' ul');
// 如果本次重置的筛选数据为空，或者之前面板无数据，则完全初始化
if (!this.config[index].data.length || !ul) {
this.renderSinglePanel1(index);
return;
}
// 创建新的筛选项元素
var frag = document.createDocumentFragment();
// 初始化单列单选列表的项
this.initSinglePanel1Items(index, frag);
// 清空原先的筛选项
ul.innerHTML = '';
// 添加新的筛选项到ul
ul.appendChild(frag);
}
/**
* 初始化单列单选列表的项
*
* @param {number} index - 筛选tab次序
* @param {any} container - 生成的项放入的容器
* @memberof FilterBar
*/
}, {
key: 'initSinglePanel1Items',
value: function initSinglePanel1Items(index, container) {
var _this9 = this;
var data = this.config[index].data;
var selectedData = this.config[index].selectedData;
data.forEach(function (item) {
var li = document.createElement('li');
li.dataset.code = item.itemCode;
li.textContent = item.itemName;
// 处理选中状态
if (item.itemCode === String(selectedData)) {
li.classList.add('selected');
// 替换tab文字
if (_this9.config[index].replace) {
var tab = document.querySelector('#filter-tab-' + index);
if ((!item.itemCode || item.itemCode === '不限') && !_this9.config[index].replaceDefault) {
// 不限的情况，若replaceDefault=false，则不替换
tab.querySelector('span').textContent = _this9.config[index].tabName;
} else {
// 用已选项替换tab文字
tab.querySelector('span').textContent = item.itemName;
}
}
}
// 绑定筛选项的点击事件
li.addEventListener('click', function () {
var tab = document.querySelector('#filter-tab-' + index);
var panel = document.querySelector('#filter-panel-' + index);
// 调整选中状态
var selected = panel.querySelector('li.selected');
if (selected) {
selected.classList.remove('selected');
}
li.classList.add('selected');
// 已选项放入缓存
_this9.cache[index] = item.itemCode;
// 执行回调函数
_this9.config[index].callback({
selected: item.itemCode,
type: FilterBar.cbEnum.confirm,
ext: index
});
// 隐藏面板
_this9.hidePanel(true, false);
// 改变tab样式
if (item.itemCode) {
tab.classList.add('selected');
} else {
tab.classList.remove('selected');
}
// 修改tab文字
if (_this9.config[index].replace) {
if ((!item.itemCode || item.itemCode === '不限') && !_this9.config[index].replaceDefault) {
// 不限的情况，若replaceDefault=false，则不替换
tab.querySelector('span').textContent = _this9.config[index].tabName;
} else {
// 用已选项替换tab文字
tab.querySelector('span').textContent = item.itemName;
}
}
});
container.appendChild(li);
});
}
/**
* 获取当前的已选项（单列多选或多列情况）
*
* @param {any} panel
* @returns
* @memberof FilterBar
*/
}, {
key: 'getSelectedItems',
value: function getSelectedItems(panel) {
var _this10 = this;
if (panel.classList.contains('multi')) {
// 多选面板
var liSelected = panel.querySelectorAll('li.selected');
var selectedItems = [];
this.toArray(liSelected).forEach(function (li) {
var code = li.dataset.code;
if (code) {
selectedItems.push(code);
}
});
return selectedItems;
}
// 复杂面板
var result = {};
var ul = panel.querySelectorAll('.filter-ul>li');
this.toArray(ul).forEach(function (li) {
var selectedItems = [];
var items = li.querySelectorAll('.filter-sub-ul li');
_this10.toArray(items).forEach(function (item) {
if (!item.classList.contains('filter-li-haspanel') && item.classList.contains('selected') && item.dataset.code && item.dataset.code !== '不限') {
selectedItems.push(item.dataset.code);
}
});
if (selectedItems.length > 0) {
result[li.dataset.code] = selectedItems;
}
});
return result;
}
/**
* 处理多选项的点击
*
* @param {any} li
* @param {any} panel
* @memberof FilterBar
*/
}, {
key: 'handleMultiSelect',
value: function handleMultiSelect(li, panel) {
var isDefaultItem = !li.dataset.code;
if (isDefaultItem) {
if (!li.classList.contains('selected')) {
this.toArray(panel.querySelectorAll('li.selected')).forEach(function (li) {
return li.classList.remove('selected');
});
li.classList.add('selected');
}
} else {
// 点击的是普通项
li.classList.toggle('selected');
// 还要再处理下"不限"选项
if (panel.querySelectorAll('.selected').length) {
panel.querySelector('li').classList.remove('selected');
} else {
panel.querySelector('li').classList.add('selected');
}
}
}
/**
* 渲染单列多选列表
*
* @param {number} index - 筛选tab次序
* @memberof FilterBar
*/
}, {
key: 'renderSinglePanel2',
value: function renderSinglePanel2(index) {
var _this11 = this;
this.log('\u521D\u59CB\u5316\u591A\u9009\u9762\u677F' + index);
var render = function render(panel) {
if (!_this11.config[index].data.length) {
// 如果不存在筛选
panel.innerHTML = _this11.emptyHtml;
} else {
var ul = document.createElement('ul');
// 初始化单列多选列表的项
_this11.initSinglePanel2Items(index, ul);
panel.appendChild(ul);
// 操作面板
var action = document.createElement('div');
action.classList.add('filter-action');
// 重置
var reset = document.createElement('div');
reset.innerHTML = '<div class="filter-action-txt">重置</div>';
reset.classList.add('filter-reset');
reset.addEventListener('click', function () {
// 恢复到不限
_this11.toArray(panel.querySelectorAll('li.selected')).forEach(function (li) {
return li.classList.remove('selected');
});
panel.querySelector('li').classList.add('selected');
// 回到顶部
ul.scrollTop = 0;
// 改变tab样式
document.querySelector('#filter-tab-' + index).classList.remove('selected');
// 执行回调
var selected = _this11.getSelectedItems(panel);
_this11.config[index].callback({
selected: selected,
type: FilterBar.cbEnum.clear,
ext: index
});
});
// 确认
var confirm = document.createElement('div');
if (!_this11.config[index].confirmHtml) {
confirm.innerHTML = '<div class="filter-action-txt">确认</div>';
} else {
confirm.innerHTML = _this11.config[index].confirmHtml;
}
confirm.classList.add('filter-confirm');
confirm.addEventListener('click', function () {
var tab = document.querySelector('#filter-tab-' + index);
var selectedItems = _this11.getSelectedItems(panel);
// 将已选项放入缓存
_this11.cache[index] = selectedItems;
// 执行回调
_this11.config[index].callback({
selected: selectedItems,
type: FilterBar.cbEnum.confirm,
ext: index
});
// 隐藏面板
_this11.hidePanel(true, false);
// 改变tab样式
if (selectedItems.length) {
tab.classList.add('selected');
} else {
tab.classList.remove('selected');
}
});
action.appendChild(reset);
action.appendChild(confirm);
panel.appendChild(action);
}
};
var panel = void 0;
if (!document.querySelector('#filter-panel-' + index)) {
// 不存在则创建面板
panel = document.createElement('div');
panel.id = 'filter-panel-' + index;
panel.classList.add('filter-panel');
panel.classList.add('multi');
panel.dataset.index = index;
render(panel);
document.querySelector('.filter-wrap').appendChild(panel);
} else {
panel = document.querySelector('#filter-panel-' + index);
panel.innerHTML = '';
render(panel);
}
// 设置面板样式
this.initPanelStyle(panel, index);
// 将已选项存入缓存
this.cache[index] = this.config[index].selectedData;
}
}, {
key: 'resetSinglePanel2',
value: function resetSinglePanel2(index) {
this.log('\u91CD\u7F6E\u591A\u9009\u9762\u677F' + index);
var ul = document.querySelector('#filter-panel-' + index + ' ul');
// 如果本次重置的筛选数据为空，或者之前面板无数据，则完全初始化
if (!this.config[index].data.length || !ul) {
this.renderSinglePanel2(index);
return;
}
// 创建新的筛选项元素
var frag = document.createDocumentFragment();
// 初始化单列多选列表的项
this.initSinglePanel2Items(index, frag);
// 清空原先的筛选项
ul.innerHTML = '';
// 添加新的筛选项到ul
ul.appendChild(frag);
// 更新确认按钮的文字
var confirm = document.querySelector('#filter-panel-' + index + ' .filter-confirm');
if (!this.config[index].confirmHtml) {
confirm.innerHTML = '<div class="filter-action-txt">确认</div>';
} else {
confirm.innerHTML = this.config[index].confirmHtml;
}
}
/**
* 初始化单列多选列表的项
*
* @param {number} index - 筛选tab次序
* @param {any} container - 生成的项放入的容器
* @memberof FilterBar
*/
}, {
key: 'initSinglePanel2Items',
value: function initSinglePanel2Items(index, container) {
var _this12 = this;
var data = this.config[index].data;
var selectedData = this.config[index].selectedData;
data.forEach(function (item) {
var li = document.createElement('li');
li.dataset.code = item.itemCode;
li.textContent = item.itemName;
// 处理选中状态
if (selectedData.length === 0 && !item.itemCode) {
li.classList.add('selected');
} else if (selectedData.indexOf(item.itemCode) >= 0) {
li.classList.add('selected');
}
// 绑定筛选项的点击事件
li.addEventListener('click', function () {
var tab = document.querySelector('#filter-tab-' + index);
var panel = document.querySelector('#filter-panel-' + index);
// 调整选中状态
_this12.handleMultiSelect(li, panel);
// 当前的暂选项
var selected = _this12.getSelectedItems(panel);
// 改变tab样式
if (selected.length) {
tab.classList.add('selected');
} else {
tab.classList.remove('selected');
}
// 执行回调
_this12.config[index].callback({
selected: selected,
type: FilterBar.cbEnum.item,
ext: index
});
});
container.appendChild(li);
});
}
/**
* 渲染复杂列表
*
* @param {any} index
* @memberof FilterBar
*/
}, {
key: 'renderComplexPanel',
value: function renderComplexPanel(index) {
var _this13 = this;
this.log('\u521D\u59CB\u5316\u590D\u6742\u9762\u677F' + index);
var render = function render(panel) {
if (!_this13.config[index].data.length) {
// 如果不存在筛选
panel.innerHTML = _this13.emptyHtml;
} else {
var ul = document.createElement('ul');
ul.classList.add('filter-ul');
// 初始化复杂列表的项
_this13.initComplexPanelItems(index, ul, []);
panel.appendChild(ul);
// 操作面板
var action = document.createElement('div');
action.classList.add('filter-action');
// 重置
var reset = document.createElement('div');
reset.innerHTML = '<div class="filter-action-txt">重置</div>';
reset.classList.add('filter-reset');
reset.addEventListener('click', function () {
// 恢复到不限
_this13.toArray(panel.querySelectorAll('.filter-sub-ul li')).forEach(function (li) {
li.classList.remove('selected');
if (li.classList.contains('filter-sub-li') && (!li.dataset.code || li.dataset.code === '不限')) {
li.classList.add('selected');
}
});
// 清空已选的提示
_this13.toArray(panel.querySelectorAll('.filter-title i')).forEach(function (i) {
i.textContent = '';
});
// 收起已展开的子面板
_this13.toArray(panel.querySelectorAll('.filter-sec-wrap.opend')).forEach(function (wrap) {
wrap.classList.remove('opend');
wrap.style.height = '0';
wrap.style.display = 'none';
});
// 收起已展开的筛选
_this13.toArray(panel.querySelectorAll('.filter-more')).forEach(function (more) {
more.classList.remove('opend');
var subUl = more.parentElement.nextElementSibling;
subUl.style.maxHeight = '40px';
});
// 回到顶部
ul.scrollTop = 0;
// 改变tab样式
document.querySelector('#filter-tab-' + index).classList.remove('selected');
// 上次点击的组置空
_this13.lastFocusGroup = '';
// 执行回调
var selected = _this13.getSelectedItems(panel);
_this13.config[index].callback({
selected: selected,
type: FilterBar.cbEnum.clear,
ext: index
});
});
// 确认
var confirm = document.createElement('div');
if (!_this13.config[index].confirmHtml) {
confirm.innerHTML = '<div class="filter-action-txt">确认</div>';
} else {
confirm.innerHTML = _this13.config[index].confirmHtml;
}
confirm.classList.add('filter-confirm');
confirm.addEventListener('click', function () {
var tab = document.querySelector('#filter-tab-' + index);
var selectedItems = _this13.getSelectedItems(panel);
// 将已选项放入缓存
_this13.cache[index] = selectedItems;
// 执行回调
_this13.config[index].callback({
selected: selectedItems,
type: FilterBar.cbEnum.confirm,
ext: index
});
// 隐藏面板
_this13.hidePanel(true, false);
// 改变tab样式
if (Object.keys(selectedItems).length) {
tab.classList.add('selected');
} else {
tab.classList.remove('selected');
}
});
action.appendChild(reset);
action.appendChild(confirm);
panel.appendChild(action);
}
};
var panel = void 0;
if (!document.querySelector('#filter-panel-' + index)) {
// 不存在则创建面板
panel = document.createElement('div');
panel.id = 'filter-panel-' + index;
panel.classList.add('filter-panel');
panel.classList.add('complex');
if (this.config[index].mutex) {
panel.classList.add('mutex');
}
panel.dataset.index = index;
render(panel);
document.querySelector('.filter-wrap').appendChild(panel);
} else {
panel = document.querySelector('#filter-panel-' + index);
panel.innerHTML = '';
render(panel);
}
// 设置面板样式
this.initPanelStyle(panel, index);
// 将已选项存入缓存
this.cache[index] = this.config[index].selectedData;
}
/**
* 重置复杂列表
*
* @param {any} index
* @memberof FilterBar
*/
}, {
key: 'resetComplexPanel',
value: function resetComplexPanel(index) {
var _this14 = this;
this.log('\u91CD\u7F6E\u590D\u6742\u9762\u677F' + index);
var panel = document.querySelector('#filter-panel-' + index);
var ul = panel.querySelector('.filter-ul');
// 如果本次重置的筛选数据为空，或者之前面板无数据，则完全初始化
if (!this.config[index].data.length || !ul) {
this.renderComplexPanel(index);
return;
}
// 找出原来面板哪些是展开状态
var opendFilters = [];
this.toArray(ul.querySelectorAll('.filter-more.opend')).forEach(function (more) {
_this14.log(more.parentElement.parentElement);
opendFilters.push(more.parentElement.parentElement.dataset.code);
});
// 创建新的筛选项元素
var frag = document.createDocumentFragment();
// 初始化复杂列表的项
this.initComplexPanelItems(index, frag, opendFilters);
// 清空原先的筛选项
ul.innerHTML = '';
// 添加新的筛选项到ul
ul.appendChild(frag);
// 如果当前面板已展开，滚动上次点击的项到可视区域
if (panel.classList.contains('on') && this.lastFocusGroup) {
var lastClick = panel.querySelector('.filter-ul>li[data-code="' + this.lastFocusGroup + '"]');
lastClick.scrollIntoView();
}
// 更新确认按钮的文字
var confirm = document.querySelector('#filter-panel-' + index + ' .filter-confirm');
if (!this.config[index].confirmHtml) {
confirm.innerHTML = '<div class="filter-action-txt">确认</div>';
} else {
confirm.innerHTML = this.config[index].confirmHtml;
}
}
/**
* 初始化复杂列表的项
*
* @param {number} index - 筛选tab次序
* @param {any} container - 生成的项放入的容器
* @param {array} opendFilters - 之前已展开的组
* @memberof FilterBar
*/
}, {
key: 'initComplexPanelItems',
value: function initComplexPanelItems(index, container, opendFilters) {
var _this15 = this;
var data = this.config[index].data;
var selectedData = this.config[index].selectedData;
data.forEach(function (groupItem) {
// 如果items是一个数组，说明是标准筛选列表，否则就是自定义面板
if (Array.isArray(groupItem.items)) {
var groupLi = document.createElement('li');
groupLi.dataset.code = groupItem.groupCode;
// 将"不限"过滤掉
// const groupItemsRemoveEmpty = groupItem.items.filter(item => item.itemCode);
// 每个分组的标题
var h3 = document.createElement('h3');
h3.classList.add('filter-title');
var title = document.createElement('span');
title.textContent = groupItem.groupName;
h3.appendChild(title);
// 每个分组的筛选块
var subUl = document.createElement('ul');
subUl.classList.add('filter-sub-ul');
// 右上角显示的已选项
var filterTxt = [];
// 临时存放二级菜单节点的数组
var secNodeList = [];
groupItem.items.forEach(function (subItem, i) {
if (!subItem.secItems) {
// 一级列表
var subLi = document.createElement('li');
subLi.classList.add('filter-sub-li');
subLi.dataset.code = subItem.itemCode || '';
var subDiv = document.createElement('div');
var subSpan = document.createElement('span');
subSpan.textContent = subItem.itemName;
subDiv.appendChild(subSpan);
subLi.appendChild(subDiv);
// 判断选中
if (!selectedData[groupItem.groupCode] && !subItem.itemCode) {
subLi.classList.add('selected');
} else if (selectedData[groupItem.groupCode] && selectedData[groupItem.groupCode].indexOf(subItem.itemCode) >= 0) {
subLi.classList.add('selected');
filterTxt.push(subItem.itemName);
}
// 绑定筛选项的点击事件
subLi.addEventListener('click', function () {
var panel = document.querySelector('#filter-panel-' + index);
var tab = document.querySelector('#filter-tab-' + index);
if (!groupItem.multiFlag) {
// 单选情况
if (_this15.config[index].mutex) {
// 互斥处理，恢复面板中全部筛选到不限
_this15.toArray(document.querySelectorAll('#filter-panel-' + index + ' .filter-sub-ul .filter-sub-li')).forEach(function (li) {
if (!li.dataset.code) {
li.classList.add('selected');
} else {
li.classList.remove('selected');
}
li.parentElement.previousElementSibling.querySelector('i').textContent = '';
});
// 清除子面板的已选项
_this15.toArray(document.querySelectorAll('#filter-panel-' + index + ' .filter-sec-li.selected')).forEach(function (li) {
return li.classList.remove('selected');
});
}
_this15.toArray(subUl.querySelectorAll('li.selected')).forEach(function (li) {
return li.classList.remove('selected');
});
subLi.classList.add('selected');
// 右上角已选项显示
var _subTitle = '';
if (subItem.itemCode) {
_subTitle = subItem.itemName;
}
groupLi.querySelector('h3 i').textContent = _subTitle;
} else {
// 点击样式处理
_this15.handleMultiSelect(subLi, subUl);
// 右上角已选项显示
var _subTitle2 = [];
_this15.toArray(subUl.querySelectorAll('li.selected')).forEach(function (li) {
if (li.dataset.code) {
_subTitle2.push(li.querySelector('span').textContent);
}
});
groupLi.querySelector('h3 i').textContent = _subTitle2.join('、');
}
// 当前的暂选项
var selected = _this15.getSelectedItems(panel);
// 改变tab样式
if (Object.keys(selected).length || _this15.config[index].customSelected) {
tab.classList.add('selected');
} else {
tab.classList.remove('selected');
}
// 将当前点击项所在的组存入缓存，以便reset之后自动滚动到可见区域中
_this15.lastFocusGroup = groupItem.groupCode;
// 执行回调
_this15.config[index].callback({
selected: selected,
type: FilterBar.cbEnum.item,
ext: index
});
});
subUl.appendChild(subLi);
} else {
// 两级列表
var _subLi = document.createElement('li');
_subLi.classList.add('filter-sub-li');
_subLi.dataset.code = subItem.itemCode || '';
if (subItem.itemCode && subItem.itemCode !== '不限') {
// 对于有子面板的li，添加特殊类以区分
_subLi.classList.add('filter-li-haspanel');
}
var _subDiv = document.createElement('div');
var _subSpan = document.createElement('span');
_subSpan.textContent = subItem.itemName;
_subDiv.appendChild(_subSpan);
_subLi.appendChild(_subDiv);
// 判断选中
if (!selectedData[groupItem.groupCode] && (!subItem.itemCode || subItem.itemCode === '不限')) {
_subLi.classList.add('selected');
}
_subLi.addEventListener('click', function () {
var panel = document.querySelector('#filter-panel-' + index);
var tab = document.querySelector('#filter-tab-' + index);
var code = _subLi.dataset.code;
// 清除其余项的选中
_this15.toArray(subUl.querySelectorAll('.filter-sub-li.selected')).forEach(function (li) {
return li.classList.remove('selected');
});
// 将点击项设为已选
_subLi.classList.add('selected');
if (!code || code === '不限') {
// 收起打开的子面板
var opendPanel = subUl.querySelector('.filter-sec-wrap.opend');
if (opendPanel) {
opendPanel.classList.remove('opend');
opendPanel.style.height = '0';
setTimeout(function () {
opendPanel.style.display = 'none';
}, 200);
}
var opendUl = subUl.previousElementSibling.querySelector('.filter-more.opend');
if (!opendUl) {
// 如果组未展开
subUl.style.maxHeight = '40px';
} else {
// 组面板已展开
// 计算当前组的高度
var subLines = 1;
var liCount = subUl.querySelectorAll('.filter-sub-li').length;
if (liCount % 4 > 0) {
subLines = parseInt(liCount / 4) + 1;
} else {
subLines = liCount / 4;
}
var ulHeight = 36 * subLines + (subLines - 1) * 8;
subUl.style.maxHeight = ulHeight + 'px';
}
// 清除所有子面板的选中
_this15.toArray(subUl.querySelectorAll('.filter-sec-li.selected')).forEach(function (li) {
return li.classList.remove('selected');
});
// 清除已选提示文字
_subLi.parentElement.previousElementSibling.querySelector('i').textContent = '';
// 当前的暂选项
var selected = _this15.getSelectedItems(panel);
// 改变tab样式
if (Object.keys(selected).length || _this15.config[index].customSelected) {
tab.classList.add('selected');
} else {
tab.classList.remove('selected');
}
// 将当前点击项所在的组存入缓存，以便reset之后自动滚动到可见区域中
_this15.lastFocusGroup = groupItem.groupCode;
// 执行回调
_this15.config[index].callback({
selected: selected,
type: FilterBar.cbEnum.item,
ext: index
});
} else {
// 点击的是普通项
var secPanel = subUl.querySelector('.filter-sec-wrap[data-forcode="' + code + '"]');
if (secPanel) {
// 默认选中 不限
var secPanelBXSelected = secPanel.querySelector(".filter-sec-li.selected") ? false : true;
var secPanelBXCode = secPanel.querySelector('.filter-sec-li[data-code=""]');
if (secPanel && secPanelBXSelected && secPanelBXCode) {
secPanelBXCode.classList.add("selected");
}
if (secPanel.classList.contains('opend')) {
// 子面板在打开的情况下，组被人为收起，这里仅修改组高度
if (subUl.style.maxHeight === '40px') {
var secLines = secPanel.dataset.lines;
var secPanelHeight = secLines * 44 + 8;
subUl.style.maxHeight = 52 + secPanelHeight + 'px';
return;
}
// 隐藏
secPanel.classList.remove('opend');
secPanel.style.height = '0';
var _opendUl = subUl.previousElementSibling.querySelector('.filter-more.opend');
if (!_opendUl) {
// 如果组未展开
subUl.style.maxHeight = '40px';
} else {
// 组面板已展开
// 计算当前组的高度
var _subLines = 1;
var _liCount = subUl.querySelectorAll('.filter-sub-li').length;
if (_liCount % 4 > 0) {
_subLines = parseInt(_liCount / 4) + 1;
} else {
_subLines = _liCount / 4;
}
var _ulHeight = 36 * _subLines + (_subLines - 1) * 8;
subUl.style.maxHeight = _ulHeight + 'px';
}
setTimeout(function () {
// 隐藏子面板
secPanel.style.display = 'none';
}, 200);
} else {
// 先隐藏所有子面板
_this15.toArray(subUl.querySelectorAll('.filter-sec-wrap.opend')).forEach(function (wrap) {
wrap.classList.remove('opend');
wrap.style.height = '0';
wrap.style.display = 'none';
});
// 再显示对应的子面板
secPanel.classList.add('opend');
secPanel.style.display = 'block';
var _secLines = secPanel.dataset.lines;
var _secPanelHeight = _secLines * 44 + 8;
setTimeout(function () {
// 设置子面板高度
secPanel.style.height = _secPanelHeight + 'px';
var opendUl = subUl.previousElementSibling.querySelector('.filter-more.opend');
if (!opendUl) {
// 如果组未展开
subUl.style.maxHeight = 52 + _secPanelHeight + 'px';
} else {
// 组面板已展开
// 计算当前组的高度
var _subLines2 = 1;
var _liCount2 = subUl.querySelectorAll('.filter-sub-li').length;
if (_liCount2 % 4 > 0) {
_subLines2 = parseInt(_liCount2 / 4) + 1;
} else {
_subLines2 = _liCount2 / 4;
}
var _ulHeight2 = 36 * _subLines2 + (_subLines2 - 1) * 8;
subUl.style.maxHeight = _ulHeight2 + _secPanelHeight + 12 + 'px';
}
}, 0);
}
}
}
});
subUl.appendChild(_subLi);
// 生成子面板筛选
var secItems = subItem.secItems;
if (secItems.length) {
var wrapLi = document.createElement('li');
wrapLi.classList.add('filter-sec-wrap');
var lines = secItems.length % 4 === 0 ? secItems.length / 4 : parseInt(secItems.length / 4) + 1;
wrapLi.dataset.lines = lines;
wrapLi.dataset.forcode = subItem.itemCode || '';
var triangle = document.createElement('i');
triangle.classList.add('filter-triangle');
// 计算三角箭头的left值
var idx = i % 4;
var liWidth = (window.innerWidth - 10) / 4;
var left = liWidth * idx + (liWidth - 10) / 2 - 8;
triangle.style.left = left + 'px';
wrapLi.appendChild(triangle);
var secUl = document.createElement('ul');
secUl.classList.add('filter-sec-ul');
// 子面板列表
secItems.forEach(function (secItem, i) {
var secLi = document.createElement('li');
secLi.classList.add('filter-sec-li');
secLi.dataset.code = secItem.itemCode || '';
var secDiv = document.createElement('div');
var secSpan = document.createElement('span');
secSpan.textContent = secItem.itemName;
secDiv.appendChild(secSpan);
secLi.appendChild(secDiv);
// 判断选中
if (selectedData[groupItem.groupCode] && selectedData[groupItem.groupCode].indexOf(secItem.itemCode) >= 0) {
secLi.classList.add('selected');
var code = subItem.itemCode;
subUl.querySelector('.filter-sub-li[data-code="' + code + '"]').classList.add('selected');
// 右上角已选项显示
var _subTitle3 = '';
var itemName = secItem.itemName;
if (i === 0) {
// 第一项默认为不限
_subTitle3 = code;
} else {
_subTitle3 = code + '-' + itemName;
}
filterTxt.push(_subTitle3);
}
secLi.addEventListener('click', function () {
if (_this15.config[index].mutex) {
// 互斥处理，恢复面板中全部筛选到不限
_this15.toArray(document.querySelectorAll('#filter-panel-' + index + ' .filter-sub-ul .filter-sub-li')).forEach(function (li) {
if (!li.dataset.code) {
li.classList.add('selected');
} else {
li.classList.remove('selected');
}
li.parentElement.previousElementSibling.querySelector('i').textContent = '';
});
}
// 子面板中的选中调整
_this15.toArray(subUl.querySelectorAll('.filter-sec-li.selected')).forEach(function (li) {
return li.classList.remove('selected');
});
secLi.classList.add('selected');
// 父面板的选中调整
_this15.toArray(subUl.querySelectorAll('.filter-sub-li.selected')).forEach(function (li) {
return li.classList.remove('selected');
});
var forcode = wrapLi.dataset.forcode;
var parentLi = subUl.querySelector('.filter-sub-li[data-code="' + forcode + '"]');
if (parentLi) {
parentLi.classList.add('selected');
}
// 右上角已选项显示
var subTitle = '';
var itemName = secItem.itemName;
if (i === 0) {
// 第一项默认为不限
subTitle = forcode;
} else {
subTitle = forcode + '-' + itemName;
}
groupLi.querySelector('h3 i').textContent = subTitle;
var panel = document.querySelector('#filter-panel-' + index);
var tab = document.querySelector('#filter-tab-' + index);
// 当前的暂选项
var selected = _this15.getSelectedItems(panel);
// 改变tab样式
if (Object.keys(selected).length || _this15.config[index].customSelected) {
tab.classList.add('selected');
} else {
tab.classList.remove('selected');
}
// 将当前点击项所在的组存入缓存，以便reset之后自动滚动到可见区域中
_this15.lastFocusGroup = groupItem.groupCode;
// 执行回调
_this15.config[index].callback({
selected: selected,
type: FilterBar.cbEnum.item,
ext: index
});
});
secUl.appendChild(secLi);
});
wrapLi.appendChild(secUl);
secNodeList.push(wrapLi);
}
// 一行展示4个项，每隔4个元素就将临时存放二级菜单节点的数组中剩下的内容插入
if ((i + 1) % 4 === 0) {
while (secNodeList.length) {
subUl.appendChild(secNodeList.shift());
}
}
}
});
// 如果secNodeList中依然有元素，说明是两级筛选，并且最后一行的的子面板还没有加入到subUl中
if (secNodeList.length) {
while (secNodeList.length) {
subUl.appendChild(secNodeList.shift());
}
}
var subTitle = document.createElement('i');
subTitle.textContent = filterTxt.join('、');
h3.appendChild(subTitle);
groupLi.appendChild(h3);
groupLi.appendChild(subUl);
// 多于4个筛选项，则显示展开更多的箭头
if (groupItem.items.length > 4) {
var more = document.createElement('div');
more.classList.add('filter-more');
more.addEventListener('click', function () {
if (!more.classList.contains('opend')) {
more.classList.add('opend');
var currentUl = groupLi.querySelector('.filter-sub-ul');
var scrollHeight = currentUl.scrollHeight;
currentUl.style.maxHeight = scrollHeight + 'px';
} else {
more.classList.remove('opend');
var _currentUl = groupLi.querySelector('.filter-sub-ul');
_currentUl.style.maxHeight = '40px';
}
});
// 如果之前该筛选为展开，则自动展开
if (opendFilters.indexOf(groupItem.groupCode) >= 0) {
more.classList.add('opend');
var lines = 1;
if (groupItem.items.length % 4 > 0) {
lines = parseInt(groupItem.items.length / 4) + 1;
} else {
lines = groupItem.items.length / 4;
}
var scrollHeight = 36 * lines + (lines - 1) * 8;
var currentUl = groupLi.querySelector('.filter-sub-ul');
currentUl.style.maxHeight = scrollHeight + 'px';
}
h3.classList.add('more');
h3.appendChild(more);
}
container.appendChild(groupLi);
} else {
container.appendChild(groupItem.items);
}
});
}
}]);
return FilterBar;
}();
/**
* 回调类型
*/
FilterBar.cbEnum = {
/**
* 确认
*/
confirm: 'confirm',
/**
* 重置
*/
clear: 'clear',
/**
* 项
*/
item: 'item',
/**
* 取消
*/
cancel: 'cancel'
};
/**
* 开启调试日志
*/
FilterBar.debug = false;
return FilterBar;
});
// 单选数据
var data1 = [{
itemName: '综合排序',
itemCode: '',
default: true
}, {
itemName: '新品推荐',
itemCode: '37',
default: false
}, {
itemName: '价格从低到高价格从低到高价格从低到高价格从低到高价格从低到高价格从低到高价格从低到高',
itemCode: '3',
default: false
}, {
itemName: '价格从高到低',
itemCode: '2',
default: false
}, {
itemName: '好评度从高到低',
itemCode: '27',
default: false
}];
// 多选数据
var data2 = [{ "default": true, "itemCode": "", "itemName": "不限" }, { "default": false, "itemCode": "playMethod=401", "itemName": "香港+迪士尼" }, { "default": false, "itemCode": "playMethod=865", "itemName": "厦门+鼓浪屿" }, { "default": false, "itemCode": "playMethod=3533", "itemName": "珠海长隆" }, { "default": false, "itemCode": "playMethod=405", "itemName": "香港+海洋公园+迪士尼香港+海洋公园+迪士尼香港+海洋公园+迪士尼香港+海洋公园+迪士尼香港+海洋公园+迪士尼香港+海洋公园+迪士尼香港+海洋公园+迪士尼香港+海洋公园+迪士尼" }, { "default": false, "itemCode": "playMethod=3532", "itemName": "广州长隆" }, { "default": false, "itemCode": "playMethod=402", "itemName": "香港+迪士尼+澳门" }, { "default": false, "itemCode": "playMethod=232", "itemName": "澳门一地" }, { "default": false, "itemCode": "playMethod=887", "itemName": "拉萨+纳木错" }, { "default": false, "itemCode": "playMethod=848", "itemName": "青岛一地" }, { "default": false, "itemCode": "playMethod=1104", "itemName": "三亚湾+亚龙湾" }, { "default": false, "itemCode": "playMethod=1144", "itemName": "华东三市+水乡" }, { "default": false, "itemCode": "playMethod=1161", "itemName": "拉萨+纳木错+羊湖+日喀则" }, { "default": false, "itemCode": "playMethod=3559", "itemName": "华东三市+迪士尼" }, { "default": false, "itemCode": "playMethod=408", "itemName": "香港一地" }];
// 互斥数据
var data4 = [{"groupCode":"地标","groupName":"地标","multiFlag":false,"items":[{"itemCode":"","itemName":"不限","default":true},{"itemCode":"972","itemName":"K11购物艺术中心","default":false},{"itemCode":"935","itemName":"七浦路","default":false},{"itemCode":"950","itemName":"上海书城","default":false},{"itemCode":"947","itemName":"上海博物馆","default":false},{"itemCode":"959","itemName":"上海商城","default":false},{"itemCode":"921","itemName":"上海大厦","default":false},{"itemCode":"973","itemName":"上海广场（原无限度）","default":false},{"itemCode":"963","itemName":"上海戏剧学院","default":false},{"itemCode":"967","itemName":"上海电视台","default":false},{"itemCode":"949","itemName":"上海音乐厅","default":false},{"itemCode":"1067","itemName":"上海音乐学院","default":false}]},{"groupCode":"火车站","groupName":"火车站","multiFlag":false,"items":[{"itemCode":"","itemName":"不限","default":true},{"itemCode":"13257","itemName":"上海南站","default":false},{"itemCode":"6037","itemName":"上海火车南站","default":false},{"itemCode":"6039","itemName":"上海站","default":false},{"itemCode":"6038","itemName":"上海虹桥站","default":false},{"itemCode":"6036","itemName":"上海西站","default":false},{"itemCode":"5844","itemName":"北京北站","default":false},{"itemCode":"5846","itemName":"北京站","default":false},{"itemCode":"5858","itemName":"朝阳站","default":false},{"itemCode":"13312","itemName":"松江站","default":false}]},{"groupCode":"地铁","groupName":"地铁（2级菜单）","multiFlag":false,"items":[{"itemCode":"10号线","itemName":"10号线","secItems":[{"itemCode":"","itemName":"不限","default":false},{"itemCode":"7653","itemName":"上海图书馆","default":false},{"itemCode":"7702","itemName":"南京东路","default":false},{"itemCode":"7701","itemName":"四川北路","default":false},{"itemCode":"7697","itemName":"天潼路","default":false},{"itemCode":"7686","itemName":"新天地","default":false},{"itemCode":"7810","itemName":"海伦路","default":false},{"itemCode":"7698","itemName":"老西门","default":false},{"itemCode":"7709","itemName":"豫园","default":false},{"itemCode":"7669","itemName":"陕西南路","default":false}]},{"itemCode":"11号线","itemName":"11号线","secItems":[{"itemCode":"","itemName":"不限","default":false},{"itemCode":"7835","itemName":"三林东","default":false},{"itemCode":"7836","itemName":"上海游泳馆","default":false},{"itemCode":"7643","itemName":"徐家汇","default":false},{"itemCode":"7634","itemName":"江苏路","default":false}]},{"itemCode":"1号线","itemName":"1号线","secItems":[{"itemCode":"","itemName":"不限","default":false},{"itemCode":"7839","itemName":"上海火车站","default":false},{"itemCode":"7682","itemName":"人民广场","default":false},{"itemCode":"7663","itemName":"常熟路","default":false},{"itemCode":"7643","itemName":"徐家汇","default":false},{"itemCode":"7676","itemName":"新闸路","default":false},{"itemCode":"7671","itemName":"汉中路","default":false},{"itemCode":"7657","itemName":"衡山路","default":false},{"itemCode":"7669","itemName":"陕西南路","default":false},{"itemCode":"7681","itemName":"黄陂南路","default":false}]},{"itemCode":"2号线","itemName":"2号线","secItems":[{"itemCode":"","itemName":"不限","default":false},{"itemCode":"7809","itemName":"东昌路","default":false},{"itemCode":"7682","itemName":"人民广场","default":false},{"itemCode":"7702","itemName":"南京东路","default":false},{"itemCode":"7672","itemName":"南京西路","default":false},{"itemCode":"7634","itemName":"江苏路","default":false},{"itemCode":"7833","itemName":"科技馆","default":false},{"itemCode":"7730","itemName":"陆家嘴","default":false},{"itemCode":"7655","itemName":"静安寺","default":false}]},{"itemCode":"3号线","itemName":"3号线","secItems":[{"itemCode":"","itemName":"不限","default":false},{"itemCode":"7839","itemName":"上海火车站","default":false},{"itemCode":"7816","itemName":"东宝兴路","default":false},{"itemCode":"7688","itemName":"宝山路","default":false}]},{"itemCode":"4号线","itemName":"4号线","secItems":[{"itemCode":"","itemName":"不限","default":false},{"itemCode":"7839","itemName":"上海火车站","default":false},{"itemCode":"7666","itemName":"东安路","default":false},{"itemCode":"7811","itemName":"临平路","default":false},{"itemCode":"7725","itemName":"南浦大桥","default":false},{"itemCode":"7675","itemName":"大木桥路","default":false},{"itemCode":"7744","itemName":"大连路","default":false},{"itemCode":"7688","itemName":"宝山路","default":false},{"itemCode":"7750","itemName":"杨树浦路","default":false},{"itemCode":"7753","itemName":"浦东大道","default":false},{"itemCode":"7810","itemName":"海伦路","default":false},{"itemCode":"7711","itemName":"西藏南路","default":false},{"itemCode":"7685","itemName":"鲁班路","default":false}]},{"itemCode":"7号线","itemName":"7号线","secItems":[{"itemCode":"","itemName":"不限","default":false},{"itemCode":"7666","itemName":"东安路","default":false},{"itemCode":"7663","itemName":"常熟路","default":false},{"itemCode":"7651","itemName":"昌平路","default":false},{"itemCode":"7660","itemName":"肇嘉浜路","default":false},{"itemCode":"7825","itemName":"长寿路","default":false},{"itemCode":"7655","itemName":"静安寺","default":false}]},{"itemCode":"8号线","itemName":"8号线","secItems":[{"itemCode":"","itemName":"不限","default":false},{"itemCode":"7677","itemName":"中兴路","default":false},{"itemCode":"7834","itemName":"中华艺术宫","default":false},{"itemCode":"7682","itemName":"人民广场","default":false},{"itemCode":"7691","itemName":"大世界","default":false},{"itemCode":"7680","itemName":"曲阜路","default":false},{"itemCode":"7698","itemName":"老西门","default":false},{"itemCode":"7819","itemName":"西藏北路","default":false},{"itemCode":"7711","itemName":"西藏南路","default":false},{"itemCode":"7707","itemName":"陆家浜路","default":false}]},{"itemCode":"9号线","itemName":"9号线","secItems":[{"itemCode":"","itemName":"不限","default":false},{"itemCode":"7820","itemName":"商城路","default":false},{"itemCode":"7673","itemName":"嘉善路","default":false},{"itemCode":"7722","itemName":"小南门","default":false},{"itemCode":"7643","itemName":"徐家汇","default":false},{"itemCode":"7678","itemName":"打浦桥","default":false},{"itemCode":"7660","itemName":"肇嘉浜路","default":false},{"itemCode":"7707","itemName":"陆家浜路","default":false},{"itemCode":"7690","itemName":"马当路","default":false}]}]},{"groupCode":"长途汽车站","groupName":"长途汽车站","multiFlag":false,"items":[{"itemCode":"","itemName":"不限","default":true},{"itemCode":"6625","itemName":"上海五角场长途汽车站","default":false},{"itemCode":"6631","itemName":"上海南浦大桥旅游站","default":false},{"itemCode":"6623","itemName":"上海嘉定汽车站","default":false},{"itemCode":"6633","itemName":"上海太平洋长途客运站","default":false}]}]
// 复杂数据
var data5 = [{"groupCode":"景点区域","groupName":"景点区域（2级菜单）","multiFlag":false,"items":[{"itemCode":"不限","itemName":"不限","secItems":[]},{"itemCode":"河北","itemName":"河北","secItems":[{"itemCode":"province=3","itemName":"不限"},{"itemCode":"city=4","itemName":"石家庄"},{"itemCode":"city=9","itemName":"保定"},{"itemCode":"city=7","itemName":"邯郸"},{"itemCode":"city=5","itemName":"唐山"},{"itemCode":"city=6","itemName":"秦皇岛"},{"itemCode":"city=10","itemName":"张家口"},{"itemCode":"city=8","itemName":"邢台"},{"itemCode":"city=11","itemName":"承德"},{"itemCode":"city=13","itemName":"廊坊"}]},{"itemCode":"北京","itemName":"北京","secItems":[{"itemCode":"province=1","itemName":"不限"},{"itemCode":"city=1","itemName":"北京"}]},{"itemCode":"广东","itemName":"广东","secItems":[{"itemCode":"province=228","itemName":"不限"},{"itemCode":"city=229","itemName":"广州"},{"itemCode":"city=231","itemName":"深圳"},{"itemCode":"city=234","itemName":"佛山"},{"itemCode":"city=245","itemName":"清远"},{"itemCode":"city=230","itemName":"韶关"}]},{"itemCode":"云南","itemName":"云南","secItems":[{"itemCode":"province=312","itemName":"不限"},{"itemCode":"city=315","itemName":"昆明"},{"itemCode":"city=320","itemName":"丽江"},{"itemCode":"city=326","itemName":"西双版纳"},{"itemCode":"city=327","itemName":"大理"},{"itemCode":"city=3889","itemName":"迪庆"}]},{"itemCode":"山东","itemName":"山东","secItems":[{"itemCode":"province=159","itemName":"不限"},{"itemCode":"city=161","itemName":"青岛"},{"itemCode":"city=168","itemName":"济宁"},{"itemCode":"city=174","itemName":"临沂"},{"itemCode":"city=160","itemName":"济南"},{"itemCode":"city=167","itemName":"潍坊"}]},{"itemCode":"浙江","itemName":"浙江","secItems":[{"itemCode":"province=96","itemName":"不限"},{"itemCode":"city=100","itemName":"杭州"},{"itemCode":"city=111","itemName":"绍兴"}]},{"itemCode":"四川","itemName":"四川","secItems":[{"itemCode":"province=278","itemName":"不限"},{"itemCode":"city=297","itemName":"阿坝"},{"itemCode":"city=279","itemName":"成都"}]},{"itemCode":"江苏","itemName":"江苏","secItems":[{"itemCode":"province=80","itemName":"不限"},{"itemCode":"city=87","itemName":"苏州"},{"itemCode":"city=82","itemName":"南京"}]},{"itemCode":"辽宁","itemName":"辽宁","secItems":[{"itemCode":"province=41","itemName":"不限"},{"itemCode":"city=42","itemName":"沈阳"}]},{"itemCode":"湖北","itemName":"湖北","secItems":[{"itemCode":"province=198","itemName":"不限"},{"itemCode":"city=199","itemName":"武汉"},{"itemCode":"city=3668","itemName":"神农架"}]},{"itemCode":"江西","itemName":"江西","secItems":[{"itemCode":"province=145","itemName":"不限"},{"itemCode":"city=3891","itemName":"九江"},{"itemCode":"city=156","itemName":"上饶"}]},{"itemCode":"陕西","itemName":"陕西","secItems":[{"itemCode":"province=339","itemName":"不限"},{"itemCode":"city=340","itemName":"西安"}]},{"itemCode":"福建","itemName":"福建","secItems":[{"itemCode":"province=135","itemName":"不限"},{"itemCode":"city=140","itemName":"泉州"},{"itemCode":"city=137","itemName":"厦门"}]},{"itemCode":"湖南","itemName":"湖南","secItems":[{"itemCode":"province=212","itemName":"不限"},{"itemCode":"city=213","itemName":"长沙"},{"itemCode":"city=227","itemName":"湘西"}]}]},{"groupCode":"旅游类型","groupName":"旅游类型","multiFlag":false,"items":[{"default":true,"itemCode":"","itemName":"不限"},{"default":false,"itemCode":"category=171818132","itemName":"景点+酒店"},{"default":false,"itemCode":"category=18182","itemName":"机票+酒店"}]},{"groupCode":"价格范围","groupName":"价格范围","multiFlag":false,"items":[{"default":true,"itemCode":"","itemName":"不限"},{"default":false,"itemCode":"price=1","itemName":"100元以下"},{"default":false,"itemCode":"price=2","itemName":"101-500元"},{"default":false,"itemCode":"price=3","itemName":"501-1000元"},{"default":false,"itemCode":"price=4","itemName":"1001-2000元"},{"default":false,"itemCode":"price=5","itemName":"2001-4000元"},{"default":false,"itemCode":"price=6","itemName":"4001-6000元"},{"default":false,"itemCode":"price=7","itemName":"6001-10000元"},{"default":false,"itemCode":"price=8","itemName":"10001元以上"}]},{"groupCode":"出发地","groupName":"出发地","multiFlag":false,"items":[{"default":true,"itemCode":"","itemName":"不限"},{"default":false,"itemCode":"districtId=56","itemName":"南京"},{"default":false,"itemCode":"districtId=9","itemName":"上海"},{"default":false,"itemCode":"districtId=69","itemName":"杭州"},{"default":false,"itemCode":"districtId=57","itemName":"无锡"}]},{"groupCode":"酒店星级","groupName":"酒店星级","multiFlag":false,"items":[{"default":true,"itemCode":"","itemName":"不限"},{"default":false,"itemCode":"hotelStar=100101","itemName":"五星级/豪华型"},{"default":false,"itemCode":"hotelStar=102103","itemName":"四星级/品质型"},{"default":false,"itemCode":"hotelStar=109","itemName":"其他/其他"},{"default":false,"itemCode":"hotelStar=104105","itemName":"三星级/舒适型"},{"default":false,"itemCode":"hotelStar=106107","itemName":"二星级/简约型"}]},{"groupCode":"产品等级","groupName":"产品等级（多选）","multiFlag":true,"items":[{"default":true,"itemCode":"","itemName":"不限"},{"default":false,"itemCode":"productGrade=0","itemName":"3钻"},{"default":false,"itemCode":"productGrade=1","itemName":"4钻"},{"default":false,"itemCode":"productGrade=2","itemName":"5钻"}]},{"groupCode":"自主品牌","groupName":"自主品牌（多选）","multiFlag":true,"items":[{"default":true,"itemCode":"","itemName":"不限"},{"default":false,"itemCode":"brandLvTuTagId=2365","itemName":"驴悦亲子"},{"default":false,"itemCode":"brandLvTuTagId=3504","itemName":"逍遥驴行"}]}];
var filterObj;
var params = [{
tabName: '单选',
selectedData: '',
replace: true,
data: data1,
callback: cb
}, {
tabName: '多选',
selectedData: [],
data: data2,
multi: true,
callback: cb
}, {
tabName: '无面板',
selectedData: {},
callback: cb
}, {
tabName: '互斥',
selectedData: {},
data: data4,
mutex: true,
callback: cb
}, {
tabName: '复杂',
selectedData: {
'价格范围': ['price=2'],
'景点区域': ['city=9']
},
data: data5,
callback: cb
}];
filterObj = new FilterBar(params);
function cb(data) {
console.log(data);
}
.filter-wrap {
color: #666;
font-size: 14px;
margin: 0;
padding-left: 0;
padding-right: 0;
position: fixed;
left: 0;
top: 0;
display: -webkit-box;
display: -webkit-flex;
display: flex;
width: 100%;
height: 45px;
background-color: #ffffff;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
z-index: 300;
box-sizing: border-box;
}
.filter-wrap * {
box-sizing: border-box;
}
.filter-wrap ul {
margin: 0;
padding: 0;
}
.filter-wrap ul, .filter-wrap li {
list-style: none;
}
.filter-tab {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-shrink: 1;
flex-shrink: 1;
-webkit-flex-basis: 0%;
flex-basis: 0%;
background-color: #fff;
color: #666;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
text-align: center;
border-image: url(data:image/gif;base64,R0lGODlhBQAFAPABANra2v///yH5BAUHAAEALAAAAAAFAAUAAAIHhB9pGatnCgA7) 2 stretch;
-webkit-border-image: url(data:image/gif;base64,R0lGODlhBQAFAPABANra2v///yH5BAUHAAEALAAAAAAFAAUAAAIHhB9pGatnCgA7) 2 stretch;
border-width: 0 0 1px 0;
border-style: solid;
z-index: 301;
position: relative;
}
.filter-tab div {
width: 100%;
text-align: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
display: flex;
overflow: hidden;
}
.filter-tab span {
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
position: relative;
-webkit-box-pack: center;
justify-content: center;
margin: 0 15px 0 4px;
line-height: 50px;
-webkit-box-orient: vertical;
}
.filter-tab.selected span{
color: #d30775;
}
.filter-tab span:after {
border: 5px solid transparent;
border-top: 5px solid #666;
width: 0;
height: 0;
top: 21px;
right: -14px;
position: absolute;
content: ' ';
transition: all 0.3s;
}
.filter-tab.filter-tab-radio span:after {
border: 0;
}
.filter-tab.selected span:after {
border-top-color: #d30775;
}
.filter-tab.on span:after {
-webkit-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg);
}
.filter-mask {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,.5);
z-index: 1;
}
html.filter-shown, body.filter-shown {
overflow-y: hidden;
height: 100%;
}
body.filter-shown .filter-mask {
display: block;
}
.filter-panel {
display: none;
margin: 0;
padding-left: 0;
padding-right: 0;
position: absolute;
/* max-height: 0; */
top: 45px;
left: 0;
width: 100%;
background-color: #fff;
min-width: 320px;
overflow-x: hidden;
overflow-y: auto;
-webkit-transition: -webkit-transform .3s ease-out;
transition: -webkit-transform .3s ease-out;
transition: transform .3s ease-out;
transition: transform .3s ease-out,-webkit-transform .3s ease-out;
}
.filter-panel.on {
/* max-height: 250px; */
}
.filter-panel ul {
padding-left: 10px;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
.filter-panel ul li {
width: 100%;
height: 45px;
line-height: 45px;
font-size: 14px;
border-image: url(data:image/gif;base64,R0lGODlhBQAFAPABANra2v///yH5BAUHAAEALAAAAAAFAAUAAAIHhB9pGatnCgA7) 2 stretch;
-webkit-border-image: url(data:image/gif;base64,R0lGODlhBQAFAPABANra2v///yH5BAUHAAEALAAAAAAFAAUAAAIHhB9pGatnCgA7) 2 stretch;
border-width: 0 0 1px 0;
border-style: solid;
position: relative;
padding-right: 32px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.filter-panel ul li.selected {
color: #d30775;
}
.filter-panel ul li.selected:after {
content: "";
width: 7px;
height: 12px;
border-bottom: 1px solid #d30775;
border-right: 1px solid #d30775;
position: absolute;
right: 10px;
top: 17px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.filter-panel.multi ul li:before {
content: "";
width: 16px;
height: 16px;
border: 1px solid #aaa;
border-radius: 2px;
position: absolute;
right: 8px;
top: 14px;
}
.filter-panel.multi ul li.selected:before {
border-color: #d30775;
}
.filter-panel.multi ul li.selected:after {
right: 14px;
top: 16px;
width: 5px;
height: 10px;
}
.filter-panel.complex li {
padding-right: 0;
height: auto;
}
.filter-panel.complex li:last-child {
border-bottom: 0;
}
.filter-panel.complex li .filter-title {
color: #333;
font-size: 14px;
margin: 0;
font-weight: normal;
padding-right: 10px;
}
.filter-panel.complex li .filter-title.more {
padding-right: 40px;
}
.filter-panel.complex li .filter-title span {
color: #666;
}
.filter-panel.complex li .filter-title i {
color: #d30775;
font-size: 12px;
float: right;
display: block;
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
height: 45px;
line-height: 45px;
font-style: normal;
}
.filter-panel .filter-sub-ul {
overflow: hidden;
padding-left: 0;
max-height: 40px;
margin-bottom: 16px;
-webkit-transition: max-height .3s ease-out;
transition: max-height .3s ease-out;
}
.filter-panel .filter-sub-ul li {
width: 25%;
float: left;
font-size: 12px;
border: 0;
padding-right: 0;
background: #fff;
z-index: 2;
}
.filter-panel .filter-sub-ul li:nth-of-type(1) div,
.filter-panel .filter-sub-ul li:nth-of-type(2) div,
.filter-panel .filter-sub-ul li:nth-of-type(3) div,
.filter-panel .filter-sub-ul li:nth-of-type(4) div{
margin-top: 0;
}
.filter-panel .filter-sub-ul li div {
height: 36px;
margin: 8px 10px 0 0;
border: 1px solid #F4F4F4;
border-radius: 3px;
background: #F4F4F4;
}
.filter-panel .filter-sub-ul li div span {
display: -webkit-box;
max-height: 36px;
line-height: 18px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.filter-panel .filter-sub-ul li.selected div {
border-color: #d30775;
background: #fff;
}
.filter-panel .filter-sub-ul li.selected:after {
border: 0;
}
.filter-action {
position: absolute;
width: 100%;
bottom: 0;
}
.filter-action>div {
height: 48px;
width: 50%;
float: left;
text-align: center;
letter-spacing: 2px;
}
.filter-action-txt {
line-height: 47px;
}
.filter-reset {
background: #fff;
-webkit-border-image: url(data:image/gif;base64,R0lGODlhBQAFAPABANra2v///yH5BAUHAAEALAAAAAAFAAUAAAIHhB9pGatnCgA7) 2 stretch;
border-width: 1px 0 1px 0;
border-style: solid;
}
.filter-confirm {
background: #d30775;
color: #fff;
}
.filter-more {
position: absolute;
right: 0;
top: 0px;
bottom: 10px;
width: 40px;
height: 45px;
background: #fff;
}
.filter-more:after {
content: "";
border-top: 1px solid #777;
border-right: 1px solid #777;
-webkit-transform: translateY(50%) rotate(135deg);
transform: translateY(50%) rotate(135deg);
position: absolute;
top: 10px;
right: 15px;
width: 9px;
height: 9px;
transition: all 0.3s;
}
.filter-more.opend:after {
-webkit-transform: translateY(50%) rotate(-45deg);
transform: translateY(50%) rotate(-45deg);
top: 15px;
}
.filter-nodata {
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
margin-top: -10px;
}
.filter-panel .filter-sub-ul .filter-sec-wrap {
width: 100%;
margin-bottom: 2px;
padding-right: 10px;
margin-top: 10px;
overflow: initial;
z-index: 1;
height: 0;
display: none;
transition: height .2s ease-out;
}
.filter-panel .filter-sub-ul .filter-sec-wrap .filter-triangle {
border-style: solid;
border-width: 0px 8px 7px 8px;
border-color: transparent transparent #F4F4F4 transparent;
position: absolute;
top: -7px;
left: 38px;
}
.filter-panel .filter-sub-ul .filter-sec-wrap .filter-sec-ul {
width: 100%;
background: #F4F4F4;
padding-top: 8px;
padding-right: 5px;
padding-bottom: 8px;
}
.filter-panel .filter-sub-ul .filter-sec-wrap .filter-sec-li {
background: transparent;
}
.filter-panel .filter-sub-ul .filter-sec-wrap li div {
background: #fff;
margin-right: 5px;
}
console