ブログ

WEB制作に関する技術情報やサンプルコードからエクセルや
パワーポイントのお役立ち情報まで幅広くご紹介しています。

jQueryで開閉メニュー&ボタンのテキストを切り替える

開閉メニューのサンプルコードは、よく目にしますが、”ボタンのテキストを切り替える機能が付いた”サンプルコードは見つからなかったので自身のコピペ用に作成しました。

スマートフォン用サイトには重宝するかも。

> サンプル

javascript

<script type="text/javascript">
$(document).ready(function(){
	
	$("#menu").hide();
	
	var flg = "close"; 
	
	$("#btn").click(function(){
								   
		$("#menu").slideToggle();
		
		if(flg == "close"){
			$(this).text("× メニューを閉じる");
			flg = "open";
		}else{
			$(this).text("= メニューを表示");
			flg = "close";
		}
	});
});
</script>

CSS

<style type="text/css">
body{
	width:400px;
	margin:0 auto;
	padding:0;
	text-align:center;
}
#btn{
	margin:20px 10px 0;
	padding:10px;
	cursor:pointer;
	background: #EEE;
	color: #444;
	border-top: 1px solid #FFF;
	border-left: 1px solid #FFF;
	border-right: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	-moz-box-shadow: -1px -1px 1px rgba(000,000,000,0.3),1px 1px 1px rgba(255,255,255,1);
	-webkit-box-shadow: -1px -1px 1px rgba(000,000,000,0.3),1px 1px 1px rgba(255,255,255,1);
}
#menu{
	margin:10px;
	text-align:left;
}
#menu ul,
#menu li{
	margin:0;
	padding:0;
	list-style-type:none;
}
#menu li a{
	display:block;
	padding:5px 0;
	color: #444;
	border-bottom: 1px solid #ccc;
	text-decoration:none;
}
</style>

HTML

<div id="btn">= メニューを表示</div>

<div id="menu">
    <ul>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
    </ul>
</div>
投稿日
2013年4月17日
カテゴリー
JavaScript
  1. jump-up さん (2014年1月31日 09:37)

    おはようございます。昨夜遅くにコメントしたにもかかわらず、早々のご教授本当にありがとうございます。
    早速確認したいと思います。ありがとうございました。

  2. blow-in さん (2014年1月31日 00:23)

    ご紹介ありがとうございます。
    変数のflgがかぶっているために「open」なのか「close」なのかが判定できていないようなので、変数をユニークにしてあげるといいのではないでしょうか?
    サンプルページ内の変数を単純な形ですがユニークしておりますので、よろしければご確認ください。
    http://blow-in.net/blog/sample/jquery003.html

  3. jump-up さん (2014年1月30日 23:44)

    お世話になります。こちらを参考にトグルボタンで開閉する記事を自分の覚書も含めて作成したのですが、複数設置して開いたまま次のボタンをクリックすると「開く」「閉じる」が逆になったりするのですが、何か良い対処方法というのはあるのでしょうか?もしよろしければご教授ください。なお、設置したページはこちらです。http://jump-up.info/jquery/jquery_toggle.html—
    jrumbleという要素を振動させるjqueryプラグインをサイトに設置したくサンプルを見ておりますとコード表示にtoggleを使用しており、自分も利用したくまた自分のサイトで利用したものは全部設置方法を記事にしているので、記事を書いた後自分でさわっていて気がつきました。
    どのように設置しているかは記事内にそのままのせております。
    失礼いたします。

  4. jquery クリックで内容の表示・非表示の切り替え(ボタンのテキストも入れ替え) |   JUMP-UP.INFO さん (2014年1月30日 22:02)

    […] ができた。 今回わからなかったのが、ボタンのテキストを入れ替えるやり方。やっと見つけた「jQueryで開閉メニュー&ボタンのテキストを切り替える」という記事が大変参考になった。 […]

コメントを残す

デザイン・ポータルサイト事業デザインオフィス blow→in
〒598-0021 大阪府泉佐野市日根野7001-2
TEL.072-425-7218(代表)
WEB.https://blow-in.net
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
ブランディング・ネットショップ事業かつらぎフルーツ
〒649-7151 和歌山県かつらぎ町東渋田325-4
TEL.0736-26-8277
WEB.https://katsuragi.shop
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
飲食店事業パンケーキカフェ cafeblow
〒598-0021 大阪府泉佐野市日根野3926
TEL.090-5127-9187
WEB.https://cafeblow.com
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
  • line@アカウント
事業別サイト