单击 jQuery UI 手风琴标题中的图标以打开 Bootstrap 模式，但防止手风琴折叠事件答案

【问题标题】：Click icon in jQuery UI accordion heading to open Bootstrap modal, but prevent accordion collapse event单击 jQuery UI 手风琴标题中的图标以打开 Bootstrap 模式，但防止手风琴折叠事件
【发布时间】：2013-01-18 11:28:03
【问题描述】：

我有一个 jQuery UI 手风琴。在每个标题栏中都有一个“编辑”图标。单击此图标会打开一个 Bootstrap 模式。

目前，单击图标会启动模式，但显然也会触发手风琴菜单展开/折叠事件。如何预防？

演示： http://jsfiddle.net/M3MDJ/3/

据我所知，Bootstrap 模态事件首先发生，因为如果我使用 event.stopPropagation() 或 event.stopImmediatePropagation() 什么都不会发生；甚至模态框也无法打开。

【问题讨论】：

显示您尝试过的代码并在 jsfiddle.net 中创建演示
@charlietfl 添加了 jsfiddle

标签： jquery jquery-ui twitter-bootstrap accordion

【解决方案1】：

您必须使用 javascript 控制模式，而不是使用 data- 属性自动初始化。否则当引导程序自动绑定点击处理程序时，它无法知道不传播事件

$(document).ready(function() {
  $('.edit').click(function(e){
    e.stopPropagation();
    $('#modal-edit').modal()
  })
  $('#accordion').accordion({
    collapsible: true,
        active: false
  });  
});

演示：http://jsfiddle.net/M3MDJ/4/

【讨论】：