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

Posted on

Sponsored Link

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要素とかを消すと普通にメニューごと消えます。

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




SHARE:)
このエントリーをはてなブックマークに追加 LINEで送る
Yahoo!ブックマークに登録

 
rss feed follow us in feedly Subscribe with livedoor Reader


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>