jquery - 单击时将带有 jQ​​uery 的图标添加到选择器

Question

我设置了一个常见问题解答页面，以在单击问题时显示答案。这是一个具有相同设置的 jsFiddle 。当答案可见时，我想添加一个向上的三角形，但我无法让它正常工作。我已经尝试了从纯 CSS 到 jQuery 的所有方法，但我无法让它正常工作。有任何想法吗？

这是HTML：

<div id="faqs">
    <h3 class="question">Question 1? <span class="faqsIcon" aria-hidden="true" data-icon="&#9660;"></span></h3>
    <div>
        <p class="answer">Answer 1</p>
    </div>
    <h3 class="question">Question 2? <span class="faqsIcon" aria-hidden="true" data-icon="&#9660;"></span></h3>
    <div>
        <p class="answer">Answer 2</p>
    </div>
</div>

这是 jQuery：（来自http://davidwalsh.name/jquery-sliders）

$(document).ready(function() {  
    $('#faqs h3').each(function() {
        var tis = $(this), state = false, answer = tis.next('div').slideUp();
        tis.click(function() {
            answer.slideToggle(state);
            tis.toggleClass('active', state);
            $(this).find('span.faqsIcon').data('data-icon',"▲");
        }); // end click function
    }); // end faqs a_function
}); // end ready

Answer 1

你可以使用这个 CSS ：

.question.active:before {
    content: "\25B2  ";
    padding-right: 3px;
}

如果问题是活跃的，前面有这个三角形：▲</p>

Answer 2

在您的 toggleClass 调用中删除 flase 参数：

tis.toggleClass('active');

jsFiddle 示例

Answer 3

Answer 4

这就是你想要的。您可以切换该课程，但它可能无法完全满足您的需求，因为您需要 2 个课程。我只使用了javascript。

我在每个 h3 中设置了一个active属性，并且每次都检索它。有趣的事实：不要放入布尔值，因为它们会被重新解释为字符串。

if (active) $(this).find('span.faqsIcon').html("▲");
else $(this).find('span.faqsIcon').html("▼");

http://jsfiddle.net/DzrdG/