Question

我设置了常见问题解答页面，以便在点击问题时显示答案。这里的a 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',"&#9650;");
        }); // end click function
    }); // end faqs a_function
}); // end ready

Answer 1

您可以使用此CSS：

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

如果问题有效，则之前有三角形：▲

Answer 2

删除toggleClass调用中的false参数：

tis.toggleClass('active');

<强> jsFiddle example

Answer 3

问题不在于CSS（虽然您的内容是&而不是▲），但toggleClass()方法无效，请将其替换为以下内容，：

tis.toggleClass('active');

JS Fiddle demo

Answer 4

这是你想要的。您可以切换该类，但由于您需要2个类，因此可能无法准确提供您所需的类。我只使用了javascript。

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

if (active) $(this).find('span.faqsIcon').html("&#9650;");
else $(this).find('span.faqsIcon').html("&#9660;");

http://jsfiddle.net/DzrdG/

单击时，使用jQuery向选择器添加一个图标

4 个答案: