• 修改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');
                })
  • 相关阅读:
    移动端rem.js及移动端的一些属性和事件
    win10下nodejs的安装及配置
    $.ajax()在IE9下的兼容性问题
    H5 video自定义视频控件
    js表格排序
    [转]jQuery不同版本区别
    移动端H5多终端适配解决方案
    一个目录结构
    Linux学习
    Python3基础笔记---线程与进程
  • 原文地址:https://www.cnblogs.com/wgx0428/p/9210621.html
Copyright © 2020-2023  润新知