[實作] jQuery FAQ Slider

學習到的知識點

Jquery

slideToggle
siblings
slideUp
children
not
toggleClass

簡介

Demo

學習使用 Jquery UI 的Accordion如何使用。

HTML

結構

使用<ul>和<li>實作。

<div id="container">
    <h1>jQuery FAQ Slider</h1>
    <div class="title">
        <h3>FAQ Slider Using jQuery</h3>
    </div>
    <ul class="faq">
        <!-- 1 -->
        <li class="q"><img src="./img/arrow.png">
            Lorem ipsum dolor sit amet consectetur adipisicing elit deleniti?
        </li>
        <li class="a">
            soluta ut blanditiis illo quisquam id consequatur dolor ipsam ipsa?
        </li>
</div>

CSS

完整 Code

如何讓 answer 一開始不出現?

使用display:none預設為不出現。

.faq li.a{
    background: #ddd;
    display: none;
}

點擊 Question 時，img 如何出現翻轉?

.rotate{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
}

JS

如何讓 Answer 出現?

這邊使用了鍊式的技巧。

當class="q"被click的時候，他的next()也就是class="a"，

使用slideToggle就可以產生上下收起的效果
siblings選取到同父元素的所有其他元素。
slideUp向上滑動

var action = "click";
var speed="500";

$(document).ready(function () {
    //Question handler
    $("li.q").on(action,function(){
        // Get next element
        $(this).next()
            .slideToggle(speed)
                // Select all other answers
                .siblings("li.a")
                    .slideUp();
    });
});

怎麼樣讓箭頭在點擊時 90 度旋轉?

children是返回所有子元素(父元素為li.q)，所以裡面的 img 會被選取到。
.not刪除所有符合表達式條件的元素。只要不是img的，都要去除掉.rotate。
.toggleClass可以進行設置與移除的切換。

//Get image for active question
var img = $(this).children('img');

//Remove the 'rotate' class for all images except the active
$('img').not(img).removeClass('rotate');

// Toggle rotate class
img.toggleClass('rotate');