HTML - アコーディオン - 真似してみる

1.　記述

2.　実際に書いてみる

1.　記述

　まずは、参考サイトをまんまパクって書いてみます。

　「css」の記述

.accordeyon > dl > dt {
    padding: 0px 10px;
}
.accordeyon > dl > dt, .accordeyon > dl > dd > ul > li, .accordeyon > ul > li {
    border-bottom: 1px solid #BDBDBD;
    height: 63px;
    line-height: 63px;
    position: relative;
}
.accordeyon > dl > dt:after {
    content: "+";
    position: absolute;
    right: 10px;
    top: 50%;
    line-height: initial;
    margin: -14px 0 0;
    font-size: 20px;
    font-weight: bold;
}
.accordeyon > dl > dt.dopen:after {
    content: "-";
}
.accordeyon > dl > dd {
    background-color: #424242;
    display: none;
}
.accordeyon > dl > dt, .accordeyon > dl > dd > ul > li, .accordeyon > ul > li {
    border-bottom: 1px solid #BDBDBD;
    height: 63px;
    line-height: 63px;
    position: relative;
}
.accordeyon >dl > dd > ul > li:after {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 15px;
    margin: -4px 0px 0px;
}
.accordeyon > dl > dd a, .accordeyon > ul > li a {
    display: block;
    padding: 0px 20px;
    box-sizing: border-box;
    color:#fff;
}
</style>
<script src="/script/jquery-3.2.1.min.js"></script>
<script>
$(function(){
$('.accordeyon > dl > dt').on('click',function(){
        var Dopenclass = $(this).attr('class');
        $(this).next('dd').slideToggle();
        if(!Dopenclass){
            $(this).addClass('dopen');
        }else{
            $(this).removeClass('dopen');
        }
    });
});



　「JavaScript」

$(function(){
$('.accordeyon > dl > dt').on('click',function(){
        var Dopenclass = $(this).attr('class');
        $(this).next('dd').slideToggle();
        if(!Dopenclass){
            $(this).addClass('dopen');
        }else{
            $(this).removeClass('dopen');
        }
    });
});



　「HTML」


<div class="accordeyon">
<dl>
<dt>メニュー</dt>
<dd>
<ul>
<li><a href="">詳細1</a></li>
<li><a href="">詳細2</a></li>
<li><a href="">詳細3</a></li>
</ul>
</dd>
</dl>
</div>


2.　実際に書いてみる



メニュー


詳細1
詳細2
詳細3





　やっと動いたのですが、仕組みが分かっていないので、ここのサイト用にどうカスタマイズしていったらよいやら・・・。
　今んとこ解析中です。