jquery - 我怎样才能将切换添加到我的这个 html 代码

Question

我已经编写了一些 html 和 css 代码来显示常见问题解答页面问题和答案，但我想给它一个切换效果。当您单击问题时，它应该会打开该特定问题的答案部分。 这是 html 代码:

<div id="faq_content">
   <div class="title">
      <strong>FAQs</strong><br>
   </div>
   <div class="answer_visible">
      <div type="button" class="q_button" onclick="">
         <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </span> 
         <i class="fa fa-angle-up"></i>                 
         <i class="fa fa-angle-down"></i>                   
      </div>
      <div class="answer">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      </div>
   </div>
   <div class="answer_hidden">
      <div type="button" class="q_button" onclick="">
         <span>Consectetur adipiscing elit? </span> 
         <i class="fa fa-angle-up"></i>                 
         <i class="fa fa-angle-down"></i>                   
      </div>
      <div class="answer">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      </div>
   </div>
   <div class="answer_hidden">
      <div type="button" class="q_button" onclick="">
         <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </span> 
         <i class="fa fa-angle-up"></i>                 
         <i class="fa fa-angle-down"></i>                   
      </div>
      <div class="answer">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      </div>
   </div>
   <div class="answer_hidden">
      <div type="button" class="q_button" onclick="">
         <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </span> 
         <i class="fa fa-angle-up"></i>                 
         <i class="fa fa-angle-down"></i>                   
      </div>
      <div class="answer">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      </div>
   </div>
   <div class="answer_hidden">
      <div type="button" class="q_button" onclick="">
         <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </span> 
         <i class="fa fa-angle-up"></i>                 
         <i class="fa fa-angle-down"></i>                   
      </div>
      <div class="answer">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      </div>
   </div>
   <div class="answer_hidden">
      <div type="button" class="q_button" onclick="">
         <span>Lorem ipsum dolor sit amet? </span> 
         <i class="fa fa-angle-up"></i>                 
         <i class="fa fa-angle-down"></i>                   
      </div>
      <div class="answer">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      </div>
   </div>
   <div class="answer_hidden">
      <div type="button" class="q_button" onclick="">
         <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </span> 
         <i class="fa fa-angle-up"></i>                 
         <i class="fa fa-angle-down"></i>                   
      </div>
      <div class="answer">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      </div>
   </div>
   <div class="answer_hidden">
      <div type="button" class="q_button" onclick="">
         <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </span> 
         <i class="fa fa-angle-up"></i>                 
         <i class="fa fa-angle-down"></i>                   
      </div>
      <div class="answer">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      </div>
   </div>
   <div class="answer_hidden">
      <div type="button" class="q_button" onclick="">
         <span>Consectetur adipiscing elit? </span> 
         <i class="fa fa-angle-up"></i>                 
         <i class="fa fa-angle-down"></i>                   
      </div>
      <div class="answer">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      </div>
   </div>
   <div class="answer_hidden">
      <div type="button" class="q_button" onclick="">
         <span> consectetur adipiscing elit? </span> 
         <i class="fa fa-angle-up"></i>                 
         <i class="fa fa-angle-down"></i>                   
      </div>
      <div class="answer">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      </div>
   </div>
   <div class="answer_hidden">
      <div type="button" class="q_button" onclick="">
         <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </span> 
         <i class="fa fa-angle-up"></i>                 
         <i class="fa fa-angle-down"></i>                   
      </div>
      <div class="answer">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      </div>
   </div>
   <div class="answer_hidden">
      <div type="button" class="q_button" onclick="">
         <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </span> 
         <i class="fa fa-angle-up"></i>                 
         <i class="fa fa-angle-down"></i>                   
      </div>
      <div class="answer">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      </div>
   </div>
   <div class="answer_hidden">
      <div type="button" class="q_button" onclick="">
         <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </span> 
         <i class="fa fa-angle-up"></i>                 
         <i class="fa fa-angle-down"></i>                   
      </div>
      <div class="answer">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      </div>
   </div>
</div>

Answer 1

将答案类的显示设置为none。现在我们需要在用户点击类 fa-angle-down 的元素时显示答案，并在用户点击类 fa-angle-up< 的元素时隐藏答案。这是 jQuery 解决方案。

$('.fa-angle-down').click(function(){ 
  $(this).parent().parent().find('.answer').hide();
});

$('.fa-angle-up').click(function(){
  $(this).parent().parent().find('.answer').show();
});