jQueryのアコーディオンがページロード時に一瞬開いてしまう問題の対処法

前にスマートフォン用にメニューバーを実装するエントリーを書いた時、アクセスした時に一瞬チラ見えしてしまうと書きつつほったらかしてたのですが、この度修正しました。

僕の場合はアコーディオンで展開する部分がこういう感じになってます。

<div id="mobileMenubar">
	<ul class="mobileMenu_ul">Menu</dt>
			<li class="mobileMenuUnder1">
				<a href="#">Menu1</a>
			</li>
			<li class="mobileMenuUnder2">
				<a href="#">Menu2</a>
			</li>
			<li class="mobileMenuUnder3">
				<a href="#">Menu3</a>
			</li>
			<li class="mobileMenuUnder4">
				<a href="#">Menu4</a>
			</li>		
			<li class="mobileMenuUnder5">
				<a href="#">Menu5</a>
			</li>		
			<li class="mobileMenuUnder6">
				<a href="#">Menu6</a>
			</li>		
			<li class="mobileMenuUnder7">
				<a href="#">Menu7</a>
			</li>		
			<li class="mobileMenuUnder8">
				<a href="#">Menu8</a>
			</li>		
	</ul>
</div>

なのでCSSでこの部分をdisplay: none;すればよかっただけです。

li.mobileMenuUnder1,
li.mobileMenuUnder2,
li.mobileMenuUnder3,
li.mobileMenuUnder4,
li.mobileMenuUnder5,
li.mobileMenuUnder6,
li.mobileMenuUnder7,
li.mobileMenuUnder8 {
	display: none;
	}

ボタン部分に他の要素使ってる場合はそこを非表示にすればよいです。

これしたら見えなくなるんじゃないのと思ってたけど、メニューをクリックしたらちゃんと開いてボタンもクリックできます。

ul要素とかを消すと普通にメニューごと消えます。

というわけでメニューバーお漏らしサブリミナル効果期間を無事終了することができました。