1

FAQページで2つのjQuery関数を使用しています。最初の質問は、質問の見出し（h4）がクリックされるたびにアクティブになります。基本的にスライドしてその回答を表示しますが、他のすべての回答が閉じていることも確認します（つまり、一度に1つの回答のみが開いています）。2番目の関数は、ページ上のすべての質問を表示/非表示にする機能です。

私の問題は、ユーザーがFAQの回答を開いて（最初の関数でアクティブ化）、すべてを表示/非表示にしようとすると発生します。表示/非表示機能は切り替えシステムを使用するため、これにより、すでに表示されている質問を含め、すべての質問が切り替えられます。その結果、（たとえば、すべて表示を使用して）すでに表示されている質問を除くすべての質問が表示されます。その答えは隠されています（切り替えられたため）。すでに開いているので、理想的には開いたままになります。

この問題の最善の解決策は何ですか？2つのjQuery関数は次のとおりです。

<script>
// Clicking a question will show that answer and hide all others
$(function() {
  $('#faqQuestions h4').each(function() {
    var tis = $(this),
    state = false,
    answerNext = tis.next('div').hide().css('height','auto').slideUp();
    answerAll = $('#faqQuestions').children('div').hide().css('height','auto').slideUp();
    tis.click(function() {
        state = !state;
        answerAll.slideUp(state);
        $('#faqQuestions').children('h4').removeClass('active');
        answerNext.slideToggle(state);
        tis.addClass('active',state);
    });
  });
});
</script>

<script>
// Show/hide all questions
var toggle = false;
$(function() {
  $('a.toggle').click(function(e) {
      var $this = $(this);
      $('#faqQuestions div').toggle(300,function() {
          if(!toggle) {
              $this.text('Hide All Questions/Answers');
              toggle = !toggle;
          }else {
              $this.text('Show All Questions/Answers');
              toggle = !toggle;
          }
       });
      e.preventDefault();
  });
});
</script>

デモの目的で、私が取り組んでいるページはここにあります：http: //r-8.us/~richard.r8us/faq

4

2 に答える 2

0

このようなことは、あなたが達成しようとしていることともっと一致しているのではないかと思います。

$(function() {
    var allOpen = false;

    $("#faqQuestions h4").click(function() {
        var h4 = $(this);

        if(!h4.hasClass("active")) {
            h4.addClass("active").next("div").slideToggle();
        }
        else {
            h4.removeClass("active").next("div").slideToggle();
        }
    });
    $('a.toggle').click(function(e) {
        e.preventDefault();
        $("#faqQuestions h4").each(function() {
            var h4 = $(this);

            if(!allOpen && !h4.hasClass("active")) {        
                h4.addClass("active").next("div").slideToggle();
            }
            else if(allOpen) {
                h4.removeClass("active").next("div").slideToggle();
            }
        });
        if(!allOpen) {
            allOpen = true;
            $(this).text("Hide All Questions/Answers");
        }
        else {
            $(this).text("Show All Questions/Answers");
        }
  });
});

これにより、クリックされた新しいセクションを公開するときに開いているFAQセクションが折りたたまれなくなりました（ユーザーが一度にすべてを開くこと、または一度に1つしか読むことができないようにするのは奇妙に思えました）。

于 2012-04-13T04:38:52.193 に答える
0

それ以外の

  $('#faqQuestions div').toggle(300,function() {
      if(!toggle) {
          $this.text('Hide All Questions/Answers');
          toggle = !toggle;
      }else {
          $this.text('Show All Questions/Answers');
          toggle = !toggle;
      }
   });

試す

      if(!toggle) {
          $('#faqQuestions div').show(300);
          $this.text('Hide All Questions/Answers');
      }else {
          $('#faqQuestions div').hide(300);
          $this.text('Show All Questions/Answers');
      }
      toggle = !toggle;
于 2012-04-13T03:57:31.660 に答える