グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

できるだけ簡単にできるアコーディオンメニューをさがしていて
下記の記事を見つけました。

jQuery アコーディオンメニュー
http://php.o0o0.jp/article/4138817358715040

もーすばらしく簡単で便利です。
デフォルトで空けておきたい部分も指定できます。
自分で作ってみたサンプル


【javascript】
----------------------------------------------

$(function () {
  // デフォルト開く部分を指定
  $('ul').eq(0).show();
  $('span').click(function() {
    // メニュー表示/非表示
    $(this).next('ul').slideToggle('fast');
  });
});

【CSS】
----------------------------------------------

ul {
  display: none;
}
span {
  cursor: pointer;
}

【HTML】
----------------------------------------------

<span>メニュー 1</span>
<ul>
<li><a href="#">メニュー 1-1</a></li>
<li><a href="#">メニュー 1-2</a></li>
<li><a href="#">メニュー 1-3</a></li>
</ul>
<span>メニュー 2</span>
<ul>
<li><a href="#">メニュー 2-1</a></li>
<li><a href="#">メニュー 2-2</a></li>
<li><a href="#">メニュー 2-3</a></li>
</ul>
<span>メニュー 3</span>
<ul>
<li><a href="#">メニュー 3-1</a></li>
<li><a href="#">メニュー 3-2</a></li>
<li><a href="#">メニュー 3-3</a></li>
</ul>

製作用メモ。
jQuery/JavaScriptを高速化するための記述方法がまとめられています。
こういう、普段なかなか身に着けられない知識はとてもありがたい。

jQuery/JavaScriptの高速化テクニックまとめ
http://matome.naver.jp/odai/2134058372410380801

実践できていたのは1つ目と5つ目くらいでした。。

jQueryのget関数を使ってPHPをリクエストし、
結果を戻り値として受け取る・・だけだったのですが、
勘違いをしていてひどく苦戦したのでメモします。


JS側は

$.get("test.php", function(data){
   alert(data);
});

というように、
PHPを実行してその結果を受けて
コールバック関数で表示させるというものです。

で、肝心のPHP側ですが、
処理の結果を return で返そうとしていて・・
（そもそも関数内じゃないので return は無意味ですね）

戻り値は XMLHttpRequestオブジェクトなので、
単純に print で出力してあげれば受け取ることができました。

コーディングをする際にできるちょっとした工夫をメモ。

■マウスオーバー
画像をふわっとオーバーします。

jQueryで簡単実装！フェードエフェクト付き画像ロールオーバー

サンプル


■マウスオーバー
背景色をふわっとオーバーします。

[jQuery] メニューの背景色をロールオーバーでふわっと変える

サンプル


■画像の表示
ふわっと表示させられます。

画像に遅延表示っぽいエフェクトを与えるだけのm5LazyDisplay

サンプル