折叠在锚点内有 span 标签的手风琴

Question

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

因此，我不得不添加一个 span 标签，并且我已经构建了大部分工作的手风琴。如果您单击标题面板上的任意位置，它会很好地展开和折叠 link。

我遇到的问题是如果您单击跨度图标区域。它总是扩展内容区域并且从不折叠它。因此，例如，如果内容区域已展开并且我单击图标将其折叠，则内容会折叠但随后会再次展开。

我有一个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)点击时跨度不是"active"。如果你改变

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

手风琴按预期工作。 fiddle.

折叠在锚点内有 span 标签的手风琴

Collapse accordion that has a span tag within the anchor

jquery

accordion

jquery-ui-accordion