摺疊手風琴，其中有一個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。