3

FAQページがあります。質問をクリックすると、質問の下から回答が展開されます。質問の最後に「+」を付ける方法を見つけたいのですが、それをクリックすると「-」に変わります。これを行う簡単な方法はありますか？答えを出すために必要なコードがわからないので、ここに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で）。マイナス/プラスをクリック可能にしたい場合は、それらをタグに移動するだけです。

于 2013-03-08T18:40:51.100 に答える
2

次の行に沿ってli.triggerのクラスを切り替えることにより、CSSで生成されたコンテンツを使用してこれを行うことができます。

（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 に答える