jQuery 手风琴排除 expand/collapse 内部 header 元素的事件。

Question

HTML

<div id="accordion">
    <h3>
        <span>Unit 1</span>
        <i class="fi-pencil editWorkUnit" title="Edit work unit" unit="1"></i>
    </h3>
    <div>Unit 1 Details</div>
    <h3>
        <span>Unit 2</span>
        <i class="fi-pencil editWorkUnit" title="Edit work unit" unit="2"></i>
    </h3>
    <div>Unit 2 Details</div>
    <h3>
        <span>Unit 3</span>
        <i class="fi-pencil editWorkUnit" title="Edit work unit" unit="3"></i>
    </h3>
    <div>Unit 3 Details</div>
</div>

JavaScript

$(function() {
    $( "#accordion" ).accordion({
       heightStyle: "content",
       collapsible: true
    });
});

这工作正常。当您单击手风琴 header 时，它将 expand/collapse 它们的内容。如果您看到 HTML 标记，我在每个 header <h3> 标记内都有一个编辑图标。我想要的是当用户点击我不想 expand/collapse 手风琴的图标时。

如何在 header.

中排除该元素上的点击事件

Answer 1

您需要在点击元素时停止传播 .editWorkUnit

检查此代码：

$('.editWorkUnit').click(function(e){
     e.stopPropagation();
})
.... your code

和codepen http://codepen.io/todorutandrei/pen/XKrZYG

Answer 2

我刚刚为您更新了 fiddle here

您只需添加：

 $( ".editWorkUnit" ).on( "click",function(e) {
      .stopPropagation();
  });

jQuery 手风琴排除 expand/collapse 内部 header 元素的事件。

jQuery accordion exclude expand/collapse event for a inner header element.

jquery

twitter-bootstrap

accordion

collapse

expand