アコーディオンメニューをクリックしたときに一度開いてすぐ閉じてしまう原因と対処法について解説!

アコーディオンメニューが一度開いてすぐ閉じてしまう状態

  • メニュー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()の記述を書いている。

原因①と原因②について

子メニューが開く仕様を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

他のHTMLCSS JavaScriptソースコード紹介記事まとめ

ソースコードまとめ

実務経験で作成したレイアウトのHTML・CSS ・JavaScriptソースコードを紹介した記事まとめています。

>お問い合わせはこちら

お問い合わせはこちら