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

将答案类的display设置为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();
});

Answer 2

您可以对此https://jsfiddle.net/d176L8x3/

使用jQuery UI

HTML

<div id="accordion">

    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </h3> 
    <div class="answer">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    </div>

    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </h3> 
    <div class="answer">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    </div>

    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </h3> 
    <div class="answer">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    </div>

    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </h3> 
    <div class="answer">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    </div>

</div>

JS

$(function() {
  $( "#accordion" ).accordion();
});

了解更多HERE https://jqueryui.com/accordion/#default

Answer 3

我解决了。我添加了这个jquery代码，它的工作很棒

jQuery(document).ready(function(){
 jQuery(".answer_hidden").click(function(){
 jQuery(this).find(".answer").toggle();
 jQuery(this).toggleClass("answer_visible");

       });
 });

Answer 4

这里按钮是按钮ID，1A是回答div id

$("#butt").on('click', function (e) {

   $("#1A").toggle();

});

http://jsfiddle.net/8tn9h5cu/3/

Answer 5

在JSfiddler上查看here

在up＆amp; amp;向下按钮。如下所示

<i class="fa fa-angle-up">imgup</i>                 
<i class="fa fa-angle-down">imgdown</i>

Answer 6

这样做。

<div class="answer_visible">
  <div type="button" class="q_button" data-id="firstdiv1" onclick="showanswer(this)">
     <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" id="firstdiv1">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  </div>

这是javascript代码

funtion showanswer(element){
var id=$(element).attr('data-id');
$('#'+id).toggle();

 }

如何添加切换到我的这个HTML代码

6 个答案: