spoiler

1 line jquery spoiler

by mmis1000

HTML

<div class='spoiler' title="標題測試">測試
    <div class='spoiler' title="標題1">測試2</div>
    <div class='spoiler' title="標題2">
        <div class='spoiler' title="標題2">測試2</div>測試2</div>
</div>
<div class='spoiler'>測試2
    <div class='spoiler'>測試2</div>
</div>

CSS

.spoiler[title]:before {
    content:attr(title)" : ";
}
.spoiler {
    margin:10px;
}

JavaScript

$(".spoiler").each(function () {
    /*使用each是因為每個按鈕切換的對象都不同，需要分別產生*/
    var a = this,
        /*將要折疊的元素保存下來*/
        b = $(this).attr("title") || ""; /*取出摺疊區塊的標題*/
    $(this).before($("<div>" + b + "[\u986f\u793a]</div>").click(function () {
        $(a).slideToggle();
    }).css("cursor", "pointer")).hide(); /*把元素利用closure的方式保存在切換顯示的函數中，將函數掛在動態產生的div上(包含標題)，然後把div放到要折疊的區塊前，最後把元素隱藏*/
}).css("margin-left", "20px").attr("title", "").removeClass("spoiler"); /*設定margin以表示縮排，移除掉用於防止用於防止js掛掉而無法顯示的fallback css，同時移除class也可以避免重複呼叫時，被掛上一個以上的按鈕導致出錯，最後清空已經移到切換按鈕上的title*/