JavaScript

jQueryでアコーディオン(クリック開閉メニュー)

スポンサードリンク
スポンサードリンク

jQueryでアコーディオン(クリック開閉メニュー)

slideToggle()を使って実装するのがかんたん。
hover,clickをEventListenerにしてslideToggle()を実行させる例がほとんど。

しかし、slideToggleの場合、css transitionのアニメーションが効かないので
ボタンを押してボタンのアニメーションをさせる場合にはアニメーション用のスクリプトを自作しないといけない。



<div class="faq_oya">
<h3>Q 質問<div class="aco_open">▲</div></h3>
                
                <div class="faq_Wrap">
                    <div class="faq_list">
                        <div><p>A</p></div>
                        <div><p>
                            回答
                            </p>
                        </div>
                    </div>
                </div>
</div>

CSS



.faq_oya h3{
    background: #eff8fc;
    color: #000000;
    font-weight: bold;
    margin: 20px 0;
    padding: 20px;
    position: relative;
}
.faq_list{
    display: flex;
    padding: 20px;
    

}
.faq_Wrap{
    display: none;
}
.faq_list > div:nth-child(1){
    width: 60px;

}
.aco_open{
    position: absolute;
    top: 30%;
    right: 2%;
    transform: rotate(180deg);
    cursor: pointer;
    z-index: 100;
}

JavaScript



$('.aco_open').click(function(){
    console.log($(this).next().slideToggle());
    $(this).parent().next().slideToggle();
    
})              
  

See the Pen
dypKoJR
by miccyome (@miccyome)
on CodePen.

WordPress運営が楽になるおすすめのサーバーをご紹介

WordPressおすすめのサーバー

スポンサードリンク

-JavaScript
-

© 2021 さくらいらぼWEB版 /個人ブログ