1. 首页
  2. 问答
  3. 如何添加切换到我的这个html代码

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

2015-10-21 66 views
2

我已经写了一些HTML和CSS代码来显示常见问题页面的问题和答案，但我想给它一个切换效果。当你点击问题时，应该打开该特定问题的答案部分。 下面是HTML代码：如何添加切换到我的这个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>

来源

2015-10-21 user3443037

+1

新增CSS太.... –

+0

我添加CSS和它的外观像这样目前http://prntscr.com/8tkubj – user3443037

+0

你能在你的问题中添加CSS吗？ –

回答

0

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

来源

2015-10-21 05:50:24

0

您可以使用jQuery UI这个https://jsfiddle.net/d176L8x3/

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(); 
});

在这里阅读更多https://jqueryui.com/accordion/#default

来源

2015-10-21 05:53:33

0

I S橄榄它。 我加入这个jQuery代码和它的工作的伟大

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

     }); 
});

来源

2015-10-21 05:59:04 user3443037

-1

做这样的。

<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(); 

}

来源

2015-10-21 06:02:33 Shaniawan

0

检查here上JSfiddler

添加文字以防止&向下按钮。像下面

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

来源

2015-10-21 07:43:14

相关问题

 相关问题