修改mui accordion(折叠面板)默认展开收缩行为
mui的折叠面板 accordion 默认展开收缩逻辑是,展开其中一个的同时收缩起同级已经展开的元素。
实际需求:展开其中一个不必收缩同级元素。

分析mui.js源代码:
window.addEventListener('tap', function(event) {
// console.log("1"+cell);
if (!cell) {
return;
}
var isExpand = false;
var classList = cell.classList;
var ul = cell.parentNode;
if (ul && ul.classList.contains(CLASS_RADIO_VIEW)) {
if (classList.contains(CLASS_SELECTED)) {
return;
}
var selected = ul.querySelector('li' + SELECTOR_SELECTED);
if (selected) {
selected.classList.remove(CLASS_SELECTED);
}
classList.add(CLASS_SELECTED);
$.trigger(cell, 'selected', {
el: cell
});
return;
}
if (classList.contains('mui-collapse') && !cell.parentNode.classList.contains('mui-unfold')) {
if (!preventDefaultException.test(event.target.tagName)) {
event.detail.gesture.preventDefault();
}
if (!classList.contains(CLASS_ACTIVE)) { //展开时,需要收缩其他同类
var collapse = cell.parentNode.querySelector('.mui-collapse.mui-active');
//方法一在源代码里面注释下面找个判断
if (collapse) {
collapse.classList.remove(CLASS_ACTIVE);
}
isExpand = true;
}
classList.toggle(CLASS_ACTIVE);
if (isExpand) {
//触发展开事件
$.trigger(cell, 'expand');
//scroll
//暂不滚动
// var offsetTop = $.offset(cell).top;
// var scrollTop = document.body.scrollTop;
// var height = window.innerHeight;
// var offsetHeight = cell.offsetHeight;
// var cellHeight = (offsetTop - scrollTop + offsetHeight);
// if (offsetHeight > height) {
// $.scrollTo(offsetTop, 300);
// } else if (cellHeight > height) {
// $.scrollTo(cellHeight - height + scrollTop, 300);
// }
}
} else {
radioOrCheckboxClick(event);
}
});
得出2种解决办法的结论。
方法一:注释如下代码
// if (collapse) {
// collapse.classList.remove(CLASS_ACTIVE);
// }
方法二:关键在 ruturn false; 这句可以取消mui.js库默认绑定的事件,这样就能达到重写。
//自定义展开后不需要讲同级元素折叠 mui('body').on('tap','.mui-collapse',function(e){ this.classList.toggle('mui-active'); return false;//可以取消继续执行默认绑定事件 })
方法三:阻止事件冒泡
//自定义展开后不需要讲同级元素折叠 mui('body').on('tap','.mui-collapse',function(e){ //阻止事件冒泡 e.stopPropagation(); this.classList.toggle('mui-active'); })
作者:江宁织造
博客:http://www.cnblogs.com/wgx0428/
博客:http://www.cnblogs.com/wgx0428/

浙公网安备 33010602011771号