jQueryのtoggleClassを使って簡単に追尾メニューの切り替えを行う


WS001764
jQueryはまだまだ勉強中なので備忘録です。
このブログの上のついてくるメニューでも実装してあります。jQueryコードは適当なのですみません。

HTML:
:
<!-- 切り替えするときのトグルになるボタン。要素は多分何でもいい-->
<li class="toggle">追尾ON/OFF</li>
:
CSS:
#Menu {
	/*↓これは絶対に必要 */
	position:fixed;
}

#Menu.nofixed{
	/*↓これは絶対に必要 */
	position:absolute;
	top:0 !important;
}
jQuery:
$(function(){
	$("#Menu .toggle").click(
		function(){
			$("#Menu").toggleClass("nofixed");
			$("#Menu .toggle").toggleClass("nofixed"); //←これはどっちでもいい。後述
		}
	);
});
jQueryのコードの中に入ってる.toggleのtoggleClassは、toggleクラスのある要素をクリックした時toggleクラスのついた要素にもnofixedクラスがつきます。
別に無くてもいいのですが、あった時に応用がききます。
例えば、CSSで下みたいにすると、追尾しているときは上向きの矢印を表示し、追尾していないときは下向きの矢印を表示するみたいなことが可能になります。
.toggle {
background:url(arrow-up.png) no-repeat;
}

.toggle.nofixed{
background:url(arrow-down.png) no-repeat !important;
}
toggleClassは便利!jQueryをしっかりと勉強したいです。

Powered by 3z0.com