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

Question

I'm trying to get this FAQ to collapse and expand on click, but nothing is happening.

I've tried messing with the CSS a little with the pseudo classes, but I haven't tried anything with 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> 

I'm expecting the "Frequently Asked Question" answer to be collasped, then on click dropdown below the FAQ title for each question. On the click the "plus" sign turns into a dash.

Answer 1

尝试以下jQuery库版本3.4.1：

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