修改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'); })
作者: 江宁织造
出处:https://www.cnblogs.com/wgx0428/p/9210621.html
版权:本文采用「署名-非商业性使用-相同方式共享 4.0 国际」知识共享许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
· 用 C# 插值字符串处理器写一个 sscanf