我如何在FAQ下拉菜單中進行切換

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> 

我希望“常見問題”答案會被歸類，然后在每個問題的FAQ標題下單擊下拉菜單。 單擊時，“加號”變為破折號。

Answer 1

嘗試以下jQuery庫版本3.4.1：

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