Question

我正在尝试使此常见问题解答在点击时折叠并扩展，但没有任何反应。

我已经尝试使用伪类将CSS弄乱了，但是我没有使用JS尝试任何操作

$('.faq li .question').click(function () {
  $(this).find('.plus-minus-toggle').toggleClass('collapsed');
  $(this).parent().toggleClass('active');
});

.parent-container {
  padding: 0 20px 0 20px;
  max-width: 800px;
  width: 100%;
}
.faq {
  list-style: none;
  padding-left: 40px;
  padding-right: 20px;
}
.faq li {
  border-bottom: 1px solid #999;
  margin-bottom: 15px;
}
.faq .answer {
  font-size: 16px;
  line-height: 24px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, padding-bottom 0.5s ease;
}
.faq li.active .answer {
  max-height: 275px !important;
  padding-bottom: 25px;
  transition: max-height 0.5s ease, padding-bottom 0.5s ease;
}
.faq .question {
  font-size: 20px;
  font-weight: 800;
  position: relative;
  cursor: pointer;
  padding: 20px 0;
  transition: color 0.5s ease;
}
.faq li.active .question {
  color: #2d2d2d;
  transition: color 0.5s ease;
}

.faq .plus-minus-toggle {
  cursor: pointer;
  height: 21px;
  position: absolute;
  width: 21px;
  left: -40px;
  top: 50%;
  z-index: 2;
}
.faq .plus-minus-toggle::before, .faq .plus-minus-toggle::after {
  background: #9b1c21;
  content: '';
  height: 5px;
  left: 0;
  position: absolute;
  top: 0;
  width: 21px;
  transition: transform 500ms ease;
}
.faq .plus-minus-toggle::after {
  transform-origin: center;
}
.faq .plus-minus-toggle.collapsed::after {
  transform: rotate(90deg);
}
.faq .plus-minus-toggle.collapsed::before {
  transform: rotate(180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"> 
	<div class="parent-container">
	  <ul class="faq">
		<li>
		  <h3 class="question">Frequently Asked Question?
			<div class="plus-minus-toggle collapsed"></div>
		  </h3>
		  <div class="answer">Answer. Donec vitae tellus risus. Aenean sed fermentum risus. Phasellus venenatis 
			ultricies dignissim. Nunc ante lectus, accumsan non porta at. Donec vitae tellus risus. Aenean sed 
			fermentum risus. Phasellus venenatis ultricies dignissim.</div>
		</li>
		<li>
		  <h3 class="question">Frequently Asked Question?
			<div class="plus-minus-toggle collapsed"></div>
		  </h3>
		  <div class="answer">Answer. Donec vitae tellus risus. Aenean sed fermentum risus. Phasellus venenatis 
			ultricies dignissim. Nunc ante lectus, accumsan non porta at. Donec vitae tellus risus. Aenean sed 
			fermentum risus. Phasellus venenatis ultricies dignissim.</div>
		</li>
	  </ul>
	</div>  
</div>

我希望将“常见问题”答案归类，然后在每个问题的“常见问题”标题下单击下拉菜单。点击后，“加号”变为破折号。

Answer 1

尝试以下jQuery库版本3.4.1：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">

我如何在FAQ下拉菜单中进行切换

1 个答案: