jQuery accordion排除内部头元素的展开/折叠事件。

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
    });
});

这很好用。当您单击手风琴标题时，它将展开/折叠其内容。如果您看到HTML标记，则每个标头<h3>标记内都有一个编辑图标。我想要的是当用户点击图标时我不想扩展/折叠手风琴。

如何在标题内排除该元素上的click事件。

Answer 1

您需要在点击元素.editWorkUnit

时停止传播

检查此代码：

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

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

Answer 2

我刚刚为你更新了小提琴here

你只需要添加：

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