読者です 読者をやめる 読者になる 読者になる

jQueryによるアコーディオンパネル

JavaScript
<ul>
    <li class="pref"><a href="#">miyagi</a></li>
    <li class="city"><a href="#">sendai</a></li>
    <li class="city"><a href="#">kesennuma</a></li>
    <li class="city"><a href="#">ishinomaki</a></li>
    <li class="city"><a href="#">onagawa</a></li>
    <li class="pref"><a href="#">iwate</a></li>
    <li class="city"><a href="#">miyako</a></li>
    <li class="city"><a href="#">rikuzentakada</a></li>
    <li class="pref"><a href="#">fukushima</a></li>
    <li class="city"><a href="#">souma</a></li>
</ul>
$("li.pref").click(accordion); // (1)

function accordion(e) {
    var $this = $(this);
    if (!$this.hasClass("opened")) { // (2)
        $("li.opened").removeClass("opened").nextUntil(".pref").slideUp(); // (3)
        $this.addClass("opened").nextUntil(".pref").slideDown(); // (4)
    } else { // (5)
        $this.removeClass("opened").nextUntil(".pref").slideUp(); // (6)
    }
    e.preventDefault(); // (7)
}


(1):「pref」クラスを持つli要素がクリックされると、accordion関数が実行される。
(2):クリックされたli要素が「opened」クラスを持っていなければ、
(3):「opened」クラスを持つli要素から「opened」クラスを取り除き、このli要素と次に現れる「pref」クラスを持つli要素との間にあるli要素をslideUpする。
(4):クリックされたli要素に「opened」クラスをつけ、このli要素と次に現れる「pref」クラスを持つli要素との間にあるli要素をslideDownする。
(5):クリックされたli要素が「opened」クラスを持っていれば、
(6):クリックされたli要素から「opened」クラスを取り除き、このli要素と次に現れる「pref」クラスを持つli要素との間にあるli要素をslideUpする。
(7):li直下にあるa要素にデフォルトでセットされているイベント(他ページへのジャンプ)を実行させない。