0

Webでダウンロードするスクリプトに問題があります。基本的に必要なのは、折りたたみパネルの相互作用を伴うFAQの質問ですが、この場合、他の質問とは異なり、1つの質問をクリックすると開きます。別の質問をクリックすると、前の質問が閉じて、クリックした質問が開きます。

この折りたたみパネル スクリプトを見つけました

それはうまく機能しますが、1 つの詳細がありません。同じリンク (質問) をクリックすると、質問は通常の通常モードに戻りません。別のリンクを選択して彼を閉じることしかできません。別の質問を選択したときと、同じ質問をもう一度クリックしたときに、質問を閉じられるようにしたいと考えています。

メインページの JavaScript コード:

<script type="text/javascript">
<!–
  $(function() {
    var $h2;
    var $answer;
    $(‘.answer’).hide();
    $(‘#faq h2′).bind(
        ‘click’,
        function()
        {
            if ($h2 && $h2[0] != this) {
                $answer.slideUp();
                $h2.removeClass(‘open’);
            }
            $h2 = $(this);
            $answer = $h2.next();
            $answer.slideDown();
            $h2.addClass(‘open’);
        }
    )
 });
 –&gt;
</script>

いくつかの助けを願っています

4

1 に答える 1

0

まず、スクリプトの変数名を変更し、わずかにリファクタリングし、コメントを追加して、何が起こっているのかを明確にしました。

<script type="text/javascript">
  $(function() { // onReady
    var $lastClickedH2;
    var $currentOpenAnswer;
    $('.answer').hide(); // All answers start hidden
    $(‘#faq h2′).click(function() // When an H2 is clicked
        {
            if ($lastClickedH2 && $lastClickedH2[0] != this) {
                // If there was an answer already open, close it
                $currentOpenAnswer.slideUp();
                $lastClickedH2.removeClass(‘open’);
            }
            // Set the last clicked H2/current open answer variables
            $lastClickedH2 = $(this);
            $currentOpenAnswer = $lastClickedH2.next();
            // Show the answer
            $currentOpenAnswer.slideDown();
            // Add an "open" class to the H2 (not sure why ...)
            $lastClickedH2.addClass(‘open’);
        }
    );
 });
</script>

ご覧のとおり (できれば今) ご覧のとおり、既にクリックした H2 をクリックすると、( にあるコードの一部によって) 閉じられますifが、その後のコードはそれを再度開きます。あなたがしたいことは、それが再び開かないように微調整することです。これを行う1つの方法は次のとおりです。

            ...
            if ($lastClickedH2 && $lastClickedH2[0] != this) {
                // If there was an answer already open, close it
                $currentOpenAnswer.slideUp();
                $lastClickedH2.removeClass(‘open’);
            }
            if ($lastClickedH2[0] == this) { // If we clicked on the same H2 twice
                // Unset the last clicked H2/current open answer variables
                $lastClickedH2 = undefined;
                $currentOpenAnswer = undefined;
                // Stop here
                // (Don't go on to the rest of the code, which would re-open it)
                return;
            }
            // Set the last clicked H2/current open answer variables
            $lastClickedH2 = $(this);
            ...

そのコードは動作するはずですが、テストされていません (バグがあっても驚かないでください)。うまくいけば、それは役に立ちます。

于 2012-06-20T00:08:16.867 に答える