折叠手风琴，其中有一个span标签

Question

我有一个网站的手风琴，在激活手风琴内容的按钮内存在带图标的span标签。通常我会使用简单的CSS来添加图标，但这是一个独特的网站，我无法使用标准技术，因为它需要嵌入。

所以相反，我不得不添加一个span标签，并且我已经构建了大部分工作的手风琴。如果您单击标题面板链接上的任何位置，它会展开并折叠得很好。

我遇到的问题是如果您单击跨度图标区域。它始终扩展内容区域并永不崩溃。因此，例如，如果内容区域被展开，并且我点击图标将其折叠，则内容会崩溃，但会再次展开。

我有一个JSFiddle showing where I am and the issue I am having。

HTML

<div class="accordion"> 
<div class="accordion-section"> 
    <a class="accordion-section-title" href="#accordion-1">Panel 1 <span class="has-icon">icon</span></a> 
    <div id="accordion-1" class="accordion-section-content"> 
     <p>Content displayed for the <b>first</b> accordion panel.</p> 
    </div> 
</div> 
<div class="accordion-section"> 
    <a class="accordion-section-title" href="#accordion-2">Panel 2 <span class="has-icon">Icon</span></a> 
    <div id="accordion-2" class="accordion-section-content"> 
     <p>Content displayed for the <b>second</b> accordion panel.</p> 
    </div> 
</div> 
<div class="accordion-section"> 
    <a class="accordion-section-title" href="#accordion-3">Panel 3 <span class="has-icon">Icon</span></a> 
    <div id="accordion-3" class="accordion-section-content"> 
     <p>Content displayed for the <b>third</b> accordion panel.</p> 
    </div> 
</div> 

jQuery的

function close_accordion_section() { 
    $('.accordion .accordion-section-title').removeClass('active'); 
    $('.accordion .accordion-section-content').slideUp(300).removeClass('open'); 
} 
$('.accordion-section-title').click(function(e) { 
    // Grab current anchor value 
    var currentAttrValue = $(this).attr('href'); 
    if($(e.target).is('.active')) { 
     close_accordion_section(); 
    } else { 
     close_accordion_section(); 
     // Add active class to section title 
     $(this).addClass('active'); 
     // Open up the hidden content panel 
     $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
    } 
    e.preventDefault(); 
}); 

CSS

a.accordion-section-title { 
    display: block; 
    margin: 0; 
    padding: 10px 15px; 
    border: 1px solid #CCC; 
    background-color: #AAA; 
} 
a.accordion-section-title:hover { 
    background-color: #CCC; 
} 
a.accordion-section-title span { 
    position: absolute; 
    right: 20px; 
} 
.accordion-section-content { 
    display: none; 
    margin: 0; 
    padding: 5px 15px; 
    background-color: #EEE; 
} 

Answer 1

$(e.target)单击跨度时不是“活动”。如果更改

if($(e.target).is('.active')) { 到 if($(e.target).closest('a').is('.active')) {

手风琴按预期工作。 fiddle。