jQuery Akkordeon exclude Expand/Collapse Event für ein inneres Kopfelement.

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

Dies funktioniert gut. Wenn Sie auf den Akkordeon-Header klicken, wird der Inhalt vergrößert bzw. verkleinert. Wenn Sie das HTML-Markup sehen, habe ich ein Bearbeitungssymbol in jedem Header <h3> Tag. Was ich möchte ist, wenn der Benutzer auf das Symbol klickt Ich möchte das Akkordeon nicht erweitern/reduzieren.

So schließen Sie das Klickereignis für dieses Element in einer Kopfzeile aus.

Answer 1

Sie müssen für das Element .editWorkUnit

Überprüfen dieser Code Ausbreitung auf Klick stoppen:

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

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

Answer 2

Ich habe die Geige hat gerade für Sie here

Sie muss einfach hinzufügen:

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