1. 首頁
  2. 問答
  3. 如何添加切換到我的這個html代碼

如何添加切換到我的這個html代碼

2015-10-21 69 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

相關問題

 相關問題