zoukankan      html  css  js  c++  java
  • layui折叠面板阻止冒泡事件

    要在layui折叠面板的title上增加自定义的按钮,但是普通的监听操作不会阻止默认的监听事件,如下方法可以实现阻止默认的监听事件仅触发自定义的点击事件,效果如下。

    Video_2020-11-05_112247.gif

    具体代码实现

    <div class="layui-fluid">
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="layui-collapse" lay-filter="test">
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">
                            <span>这是一个layui折叠面板</span>
                            <button class="layui-btn layui-btn-xs">点我阻止冒泡</button>
                        </h2>
                        <div class="layui-colla-content">
                            <p>这里是折叠面板的内容</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        $(document).ready(function () {
            layui.use(['layer', 'element'], function () {
                var layer = layui.layer;
    
                $(document.body).find('.layui-colla-title').on('click', '.layui-btn', function (e) {
                    var isShow = $(this).parent('.layui-colla-title').siblings('.layui-colla-content').hasClass('layui-show');
                    layer.msg("没有触发面板" + (isShow ? "折叠" : "展开") + "事件", {icon: 1});
                    layui.stope(e)
                });
            });
        });
    </script>
    
  • 相关阅读:
    C#学习历程(三)[基础概念]
    C#学习历程(二)[基础知识]
    C#学习历程(一)[基础概念]
    mvp和mvc的区别
    Java基础摘要(一)
    web前端概念摘要(一)
    Reflection_1
    后台管理_GMS_1
    模板收藏_1
    需求收藏_1
  • 原文地址:https://www.cnblogs.com/lantor/p/13930730.html
Copyright © 2011-2022 走看看