0

我设置了一个常见问题解答页面，以在单击问题时显示答案。这是一个具有相同设置的 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
4

4 回答 4

0

你可以使用这个 CSS ：

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

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

于 2013-01-30T17:10:21.250 回答
0

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

tis.toggleClass('active');

jsFiddle 示例

于 2013-01-30T17:14:41.093 回答
0
于 2013-01-30T17:14:47.293 回答
0

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

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

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

http://jsfiddle.net/DzrdG/

于 2013-01-30T17:39:42.620 回答