jQuery アコーディオン

アコーディオン

jsめも
所謂アコーディオンとかいう
dt押したらddでてきて、その中に閉じるボタンがある的なやつ
toggle使うだけでいけそうだけど、ボタンのアイコンとか変えるのにif文がいるんだったと思う

js

$(function(){

    var dt = $(".js-dt");
    var dd = $(".js-dd");
    var _close = $(".js-close a");
    dd.hide();
    dt.click(function(){
        var _this_dt = $(this).parents("dl").children("dt");
        var _this_dd = $(this).parents("dl").children("dd");
        if(_this_dd.css('display') != 'none'){
            _this_dd.slideUp(function(){
                _this_dt.removeClass("active");
            });
        }else{
            _this_dt.addClass("active");
            _this_dd.slideDown();
        };
    });
    _close.click(function(){
        var _this_dt = $(this).parents("dl").children("dt");
        var _this_dd = $(this).parents("dl").children("dd");
        _this_dd.slideUp(function(){
            _this_dt.removeClass("active");
        });
    });
});

って超絶ムダなスクリプトかいてたのを修正

js

$(function(){
    $(".js-dd").hide();
    $(".js-dt, .js-close a").click(function(){
        var _this_dt = $(this).parents("dl").children("dt");
        var _this_dd = $(this).parents("dl").children("dd");
        if(_this_dd.css('display') === 'none'){
            _this_dt.addClass("active");
            _this_dd.slideDown();
        }else{
            _this_dd.slideUp(function(){
                _this_dt.removeClass("active");
            });
        };
    });
});

if文はif(hoge.css('display') != 'none')よりif(hoge.css('display') === 'none')の方がわかりやすいかも
parentsとchildrenがキモい。.each()使ったらいいとおもうけど、とりあえずここまで