MUI折叠面板accordion中有个按钮，点击触发了折叠面板的事件

Posted 2023-04-07

code：<a class="mui-navigate-right" href="#">表单 <button onclick="pla()">+</button></a>参考MUI Demo我在a标签中加了个按钮，具体如附件图。请问哪位大神知道怎么能再点击按钮的时候，屏蔽折叠和展开面板的事件？

1、折叠面板

折叠面板从二级列表中演化而来，dom结构和二级列表类似，如下：

<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板1</a>
<div class="mui-collapse-content">
<p>面板1子内容</p>
</div>
</li>
</ul>

可以在折叠面板中放置任何内容；折叠面板默认收缩，若希望某个面板默认展开，只需要在包含.mui-collapse类的li节点上，增加.mui-active类即可；mui官网中的方法说明，使用的就是折叠面板控件。

参考技术A 兄弟问题解决了吗? 参考技术B 有人知道这个动画怎么能改成渐入式的那种？

mui switch 点击事件不冒泡

工作上遇到一个问题

手机移动端app，采用mui框架，要求左边是手机号码，右边是switch开关，并且点击标题的时候，可以展开下面人员的基本信息。

采用了折叠面板。

先上图如下：

        

开始时出现的问题是：点击右侧开关按钮，也会联动把基本信息打开，不想这样，想要点击开关按钮与折叠面板没有关系，就需要取消点击冒泡操作；

关键代码如下

<ul class="mui-table-view">

<li class="mui-table-view-cell mui-collapse">
<a id="icon-phone"><span class="mui-icon mui-icon-phone"></span>13703956635<div class="mui-switch mui-active" id="text2">
<div class="mui-switch-handle"></div>
</div></a>
<div class="mui-collapse-content">
<div id="segmentedControl" class="mui-segmented-control">
<a class="mui-control-item mui-active">基本信息</a>
</div>
<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed mui-margin-top10">
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-3">
<p class="mui-h6 mui-ellipsis">姓名：</p>
</div>
<div class="mui-table-cell mui-col-xs-3">
<span class="mui-h5">张*</span>
</div>
<div class="mui-table-cell mui-col-xs-3">
<p class="mui-h6 mui-ellipsis">性别：</p>
</div>
<div class="mui-table-cell mui-col-xs-3">
<span class="mui-h5">男</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-3">
<p class="mui-h6 mui-ellipsis">ARPU：</p>
</div>
<div class="mui-table-cell mui-col-xs-3">
<span class="mui-h5">98</span>
</div>
<div class="mui-table-cell mui-col-xs-3">
<p class="mui-h6 mui-ellipsis">宽带数：</p>
</div>
<div class="mui-table-cell mui-col-xs-3">
<span class="mui-h5">2</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-3">
<p class="mui-h6 mui-ellipsis">IPTV数：</p>
</div>
<div class="mui-table-cell mui-col-xs-9">
<span class="mui-h5">3</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-3">
<p class="mui-h6 mui-ellipsis">套餐：</p>
</div>
<div class="mui-table-cell mui-col-xs-9">
<span class="mui-h5">99元套餐</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-3">
<p class="mui-h6 mui-ellipsis">小区：</p>
</div>
<div class="mui-table-cell mui-col-xs-9">
<span class="mui-h5">郑东新区雅居乐国际花园</span>
</div>
</div>
</li>
</ul>
</div>
</li>

</ul>

最后在页脚加上如下代码：

<script src="../src/component/mui/examples/hello-mui/js/mui.min.js"></script>
<script src="../src/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(".mui-switch").on("tap",function(event)
event.stopPropagation();
)
</script>

ok! 满足需求了。