jQuery accordion исключает событие expand/collapse для внутреннего элемента заголовка.

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>. Я хочу, когда пользователь нажимает на значок, который я не хочу расширять/сворачивать аккордеон.

Как исключить событие щелчка на этом элементе внутри заголовка.

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