目次
アコーディオンメニューが一度開いてすぐ閉じてしまう状態
-
メニュー1
- メニュー1-1
- メニュー1-2
- メニュー1-3
- メニュー1-4
- メニュー1-5
- メニュー1-6
- メニュー1-7
- メニュー1-8
-
メニュー2
- メニュー2-1
- メニュー2-2
- メニュー2-3
- メニュー2-4
- メニュー2-5
- メニュー2-6
- メニュー2-7
- メニュー2-8
アコーディオンメニューのソースコード例
PR
<div class="accordion">
<ul class="accordion__list">
<li class="accordion__item">
<span>メニュー1</span>
<div class="toggle-btn"></div>
<ul class="level02">
<li class="accordion__item">
<span>メニュー1-1</span>
</li>
<li class="accordion__item">
<span>メニュー1-2</span>
</li>
<li class="accordion__item">
<span>メニュー1-3</span>
</li>
<li class="accordion__item">
<span>メニュー1-4</span>
</li>
<li class="accordion__item">
<span>メニュー1-5</span>
</li>
<li class="accordion__item">
<span>メニュー1-6</span>
</li>
<li class="accordion__item">
<span>メニュー1-7</span>
</li>
<li class="accordion__item">
<span>メニュー1-8</span>
</li>
</ul>
</li>
<li class="accordion__item">
<span>メニュー2</span>
<div class="toggle-btn"></div>
<ul class="level02">
<li class="accordion__item">
<span>メニュー2-1</span>
</li>
<li class="accordion__item">
<span>メニュー2-2</span>
</li>
<li class="accordion__item">
<span>メニュー2-3</span>
</li>
<li class="accordion__item">
<span>メニュー2-4</span>
</li>
<li class="accordion__item">
<span>メニュー2-5</span>
</li>
<li class="accordion__item">
<span>メニュー2-6</span>
</li>
<li class="accordion__item">
<span>メニュー2-7</span>
</li>
<li class="accordion__item">
<span>メニュー2-8</span>
</li>
</ul>
</li>
</ul>
</div>
.accordion__list > .accordion__item {
border-bottom: 1px solid currentColor;
}
.level02,
.level02 .accordion__item {
border-top: 1px solid currentColor;
}
/* .level02は子メニュー */
.level02 {
display: none; /* 子メニューは最初非表示にする */
padding-left: 30px;
}
.accordion__item span {
display: block;
padding: 10px 0;
}
/* .toggle-btnはアコーディオンボタン */
.toggle-btn {
width: 30px;
height: 30px;
position: absolute;
top: 7px;
right: 0;
transition: 0.3s all;
cursor: pointer;
}
.toggle-btn::before,
.toggle-btn::after {
content: "";
width: 16px;
height: 2px;
position: absolute;
top: 14px;
left: 7px;
background-color: #333;
border-radius: 5px;
transition: 0.3s all;
}
.toggle-btn::after {
transform: rotate(90deg);
}
.toggle-btn.open::after {
transform: rotate(0deg);
}
/* アコーディオンボタンをクリックしたら子メニューを開く */
.toggle-btn.open + .level02 {
display: block;
}
const toggleBtn = jQuery(".toggle-btn");
jQuery(toggleBtn).on("click", function(){
const clickedTarget = jQuery(this);
clickedTarget.toggleClass("open");
clickedTarget.next().slideToggle();
});
アコーディオンメニューが一度開いてすぐ閉じてしまう原因
アコーディオンボタンをクリックした後に、下記の原因が重なるとアコーディオンメニューが一度開いてすぐ閉じてしまう状態が発生します。
原因① クリックした後に子メニューが開く仕様をslideToggle()で実装している
原因② クリックした後に子メニューが開く仕組みをcssでも実装している
原因③ JavaScriptで「open」クラスが付与する記述の後に、slideToggle()の記述を書いている。
原因② クリックした後に子メニューが開く仕組みをcssでも実装している
原因③ JavaScriptで「open」クラスが付与する記述の後に、slideToggle()の記述を書いている。
原因①と原因②について
子メニューが開く仕様をslideToggle()で実装するときはcssで実装する必要がないので上記で紹介したcssの中の下記部分は不要になります。
/* アコーディオンボタンをクリックしたら子メニューを開く */
.toggle-btn.open + .level02 {
display: block;
}
原因③について
上記で紹介したJavaScriptで「slideToggle()」と「openクラスの付与」の順番を逆にして下記に変更します。
const toggleBtn = jQuery(".toggle-btn");
jQuery(toggleBtn).on("click", function(){
const clickedTarget = jQuery(this);
clickedTarget.next().slideToggle(); // slideToggle()が先
clickedTarget.toggleClass("open"); // openクラスの付与が後
});
修正後の表示
-
メニュー1
- メニュー1-1
- メニュー1-2
- メニュー1-3
- メニュー1-4
- メニュー1-5
- メニュー1-6
- メニュー1-7
- メニュー1-8
-
メニュー2
- メニュー2-1
- メニュー2-2
- メニュー2-3
- メニュー2-4
- メニュー2-5
- メニュー2-6
- メニュー2-7
- メニュー2-8
他のHTML・CSS ・JavaScriptソースコード紹介記事まとめ
ソースコードまとめ
実務経験で作成したレイアウトのHTML・CSS ・JavaScriptソースコードを紹介した記事まとめています。