jquery - 如何在可扩展问题的末尾添加+或-？

Question

我有一个常见问题解答页面，当您单击问题时，答案会从问题下方展开。我想找出一种方法，在问题末尾有一个“+”，当你点击它时，它会变成“-”。是否有捷径可寻？我不确定您需要什么代码才能给我答案，所以我将在此处提供 html:

{exp:channel:entries channel="faq" sort="asc" {gv_param_disable_default}}
    <ul>
    <li class="trigger"><p><a href="#">{faqs_question}</a></p>
        <div class="hidden">
        <p>{faqs_answer}</p>
        </div>

    </li>
    </ul>
{/exp:channel:entries}

和我的jquery:

$('.trigger').click(function() {
   $(this).children('.hidden').toggle('slow');
return false;
 });    

Answer 1

{exp:channel:entries channel="faq" sort="asc" {gv_param_disable_default}}
    <ul>
    <li class="trigger"><p><a href="#">{faqs_question}</a></p> <span class="plus">[+]</span><span class="minus">[-]</span>
        <div class="hidden">
        <p>{faqs_answer}</p>
        </div>

    </li>
    </ul>
{/exp:channel:entries}

Javascript

$('.trigger').click(function() {
   $(this).children('.hidden').toggle('slow', function() {
        if ($(this).is(':visible')) {
            $(this).parent().children('.plus').hide();
            $(this).parent().children('.minus').show();
        } else {
            $(this).parent().children('.plus').show();
            $(this).parent().children('.minus').hide();
        }
   });
    return false;
 });    

parent() 应该是 li.trigger，然后我们要选择子项 .plus 和 .minus 来更改可见性。

此外，您必须在页面加载时隐藏 [-](最好在 CSS 中)。如果您希望减号/加号可点击，只需将它们移至 a 标签即可。