3

我有一个常见问题解答页面，当您单击问题时，答案会从问题下方展开。我想想办法在问题的末尾加上一个“+”，当你点击它时，它会变成一个“-”。是否有捷径可寻？我不确定您需要什么代码才能给我答案，所以我将这里是 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;
 });
4

2 回答 2

3 
{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 标签中即可。

于 2013-03-08T18:40:51.100 回答
2

您可以使用 CSS 生成的内容来执行此操作，方法是沿以下几行切换 li.trigger 的类：

（我稍微简化了你的 HTML）：

<ul>
  <li class="trigger">
    <p class="question"><a href="#">{faqs_question}</a></p>
    <p class="answer">{faqs_answer}</p>
  </li>
</ul>

JS：

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

CSS：

li.trigger p.answer {
  display: none;    
}
li.trigger p.question:after {
  content: "+";
  padding-left: .5em;   
}
li.open p.question:after {
  content: "-";
}

你可以设计更多的样式；我只是添加了一点填充。

于 2013-03-08T19:11:05.807 回答