切换关闭其他打开的div

Question

我试图弄清楚当我展开其他div时如何关闭其他div。

在这里查看我的代码：

$( document ).ready(function() {
	$( ".faq-question" ).click(function() {
	
		$(this).toggleClass('open');
		$(this).parent().next('.field-faq-answer').toggle();
	});
	
});	

.field-faq-answer{
	display:none;	
}
.faq-antwoord{
	border-bottom: 1px solid #ccc;	
	margin-top:10px;
	padding-bottom:10px;
}
.faq-antwoord p{
	margin-bottom:0px;
	padding-left: 10px;
    border-left: 2px solid #3395d3;
	margin-left:10px;
}
.field-faq-question-first{
	border-top: 1px solid #ccc;	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="faq-container">
    <div class="field-faq-question field-faq-question-first">
      <h3 class="faq-question">
        Titel 1
      </h3>
    </div>
    <div class="field-faq-answer">
      <div class="faq-antwoord">
        <p>
          TEST 1
        </p>
      </div>
    </div>
</div>
<div class="faq-container">
    <div class="field-faq-question field-faq-question-first">
      <h3 class="faq-question">
        Titel 2
      </h3>
    </div>
    <div class="field-faq-answer">
      <div class="faq-antwoord">
        <p>
          TEST 2
        </p>
      </div>
    </div>
</div>
<div class="faq-container">
    <div class="field-faq-question field-faq-question-first">
      <h3 class="faq-question">
        Titel 3
      </h3>
    </div>
    <div class="field-faq-answer">
      <div class="faq-antwoord">
        <p>
          TEST 3
        </p>
      </div>
    </div>
</div>

现在可以点击titel 1和titel 2，这两个内容都会显示出来。但我只希望显示1个答案并隐藏其他人

Answer 1

为此，您需要在所有其他hide()元素上调用.field-faq-answer，但点击的元素除外：

$(document).ready(function() {
  $(".faq-question").click(function() {
    $(this).toggleClass('open');
    var $target = $(this).parent().next('.field-faq-answer').toggle();
    $('.field-faq-answer').not($target).hide();
  });
});

.field-faq-answer {
  display: none;
}

.faq-antwoord {
  border-bottom: 1px solid #ccc;
  margin-top: 10px;
  padding-bottom: 10px;
}

.faq-antwoord p {
  margin-bottom: 0px;
  padding-left: 10px;
  border-left: 2px solid #3395d3;
  margin-left: 10px;
}

.field-faq-question-first {
  border-top: 1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="faq-container">
  <div class="field-faq-question field-faq-question-first">
    <h3 class="faq-question">
      Titel 1
    </h3>
  </div>
  <div class="field-faq-answer">
    <div class="faq-antwoord">
      <p>
        TEST 1
      </p>
    </div>
  </div>
</div>
<div class="faq-container">
  <div class="field-faq-question field-faq-question-first">
    <h3 class="faq-question">
      Titel 2
    </h3>
  </div>
  <div class="field-faq-answer">
    <div class="faq-antwoord">
      <p>
        TEST 2
      </p>
    </div>
  </div>
</div>
<div class="faq-container">
  <div class="field-faq-question field-faq-question-first">
    <h3 class="faq-question">
      Titel 3
    </h3>
  </div>
  <div class="field-faq-answer">
    <div class="faq-antwoord">
      <p>
        TEST 3
      </p>
    </div>
  </div>
</div>

Answer 2

试试这个：

$( document ).ready(function() {
    $( ".faq-question" ).click(function() {

        $('.field-faq-answer').toggle();
        $(this).toggleClass('open'); 
    });

});

Answer 3

您可以定位除您正在使用的元素之外的所有其他元素，然后关闭

$( document ).ready(function() {
    var questions = $( ".faq-question" ).on('click', function() {
        $(this).toggleClass('open');
        questions.not(this).removeClass('open');

        var answer = $(this).parent().next('.field-faq-answer').toggle();
        $('.field-faq-answer').not(answer).hide();
    });
});

Answer 4

您可以将nextAll（）方法用于父级的父级，即faq-container，然后使用find选择field-FAQ-answer并进行切换。

$(this).parent().parent().nextAll('.faq-container').find('.field-faq-answer').toggle();

Answer 5

＆＃13;

＆＃13;

$( document ).ready(function() {

	$( ".faq-question" ).click(function() {
  $('.faq-container .field-faq-answer').hide();
		$(this).toggleClass('open');
		$(this).parent().next('.field-faq-answer').toggle();
	});
  
	
});

＆＃13;

.field-faq-answer{
	display:none;	
}
.faq-antwoord{
	border-bottom: 1px solid #ccc;	
	margin-top:10px;
	padding-bottom:10px;
}
.faq-antwoord p{
	margin-bottom:0px;
	padding-left: 10px;
    border-left: 2px solid #3395d3;
	margin-left:10px;
}
.field-faq-question-first{
	border-top: 1px solid #ccc;	
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="faq-container">
    <div class="field-faq-question field-faq-question-first">
      <h3 class="faq-question">
        Titel 1
      </h3>
    </div>
    <div class="field-faq-answer">
      <div class="faq-antwoord">
        <p>
          TEST 1
        </p>
      </div>
    </div>
</div>
<div class="faq-container">
    <div class="field-faq-question field-faq-question-first">
      <h3 class="faq-question">
        Titel 2
      </h3>
    </div>
    <div class="field-faq-answer">
      <div class="faq-antwoord">
        <p>
          TEST 2
        </p>
      </div>
    </div>
</div>
<div class="faq-container">
    <div class="field-faq-question field-faq-question-first">
      <h3 class="faq-question">
        Titel 3
      </h3>
    </div>
    <div class="field-faq-answer">
      <div class="faq-antwoord">
        <p>
          TEST 3
        </p>
      </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

它的工作尝试了。