[ JQuery ]

  • 2013-11-12 


		$(".clickArea").click(function (){
			menuid = "#"+this.id+"_menu";
			$(menuid).slideToggle();
		});

クリックイベントの監視は、idを注目するのではなく、クラスの「clickArea」を対象とします。すると、メニュー1でもメニュー2でもさらにメニュー3でもクリックイベントが発生した時に、

		$(".clickArea").click(function (){
			ここの処理が実行
		});

「ここの処理が実行」の部分に記述したスクリプトが実行される事になります。ここで重要なのは、どのメニューでクリックされたかを識別する事です。識別できれば、そのメニューだけを開閉できます。そこで登場するのが、「this」というキーワードです。thisは、イベント処理の関数内で記述することで、イベントが起きた場所というか物（オブジェクト）を示す変数です。例えばここで、this.idとすれば、クリックされた部分のidとなります。そこで、メニューのクリックされる部分のidをca1,ca2,ca3とし、メニューの内容のdivのブロックをca1_menu,ca2_menu,ca3_menuとし、クリックされたidの名前の後に「_menu」と追加された名前にします。そうすると、イベントが発生した時にの、this.id+"_menu"がca1_menu・・・ca3_menuとなり、メニューと内容を計算式で関連付けて利用しやすくなります。そうすることで、以下の一つの記述でca1〜ca3に対応できるわけです。

		$(".clickArea").click(function (){
			menuid = "#"+this.id+"_menu";
			$(menuid).slideToggle();
		});


click me. メニュー1
  • メニュー1-0
  • メニュー1-1
  • メニュー1-2
  • メニュー1-3
  • メニュー1-4
  • メニュー1-5
  • メニュー1-6
  • メニュー1-7
  • メニュー1-8
  • メニュー1-9
  • 出戸調剤薬局
  • dbweb.0258.net

click me. メニュー2
  • メニュー2-0
  • メニュー2-1
  • メニュー2-2
  • メニュー2-3
  • メニュー2-4
  • メニュー2-5
  • メニュー2-6
  • メニュー2-7
  • メニュー2-8
  • メニュー2-9

click me. メニュー3
  • メニュー3-0
  • メニュー3-1
  • メニュー3-2
  • メニュー3-3
  • メニュー3-4
  • メニュー3-5
  • メニュー3-6
  • メニュー3-7
  • メニュー3-8
  • メニュー3-9

サンプルですので、メニューを100個くらい作ってみましょう。

メニュー100個に挑戦→開閉メニュー05