JQueryで折りたたみ

前回の記事でソースを示すのに折りたたみボックスをJQueryを使って作ってみました。ただ単にJavaScriptで作っても良かったのですが、なんとなく気分で。

実際に動かすとこんな感じになります。
(※ サンプルはWordpressからBloggerに移った関係で消滅しました)

JavaScriptコード

$(document).ready(function() {
$("intput.oritatami").hover(function(){
$(this).css("cursor","pointer");
},function(){
$(this).css("cursor","default");
});
$("p.oritatamiC").css("display","none");
$("input.oritatami").click(function(){
$(this).next().slideToggle("fast");
var text = $(this).attr("value");
if(text.indexOf("表示") > 0)
text = text.replace("表示","隠す");
else
text = text.replace("隠す","表示");
$(this).attr("value",text);
//$(this).next().css("display","block");
});
});

HTMLコード

<input class="oritatami" type="button" value="中身を表示" />
<p class="oritatamiC" style="display:none">中身中身中身
中身中身中身
中身中身中身</p>

HTMLコードの中身を格納するPタグでdisplay:noneとしていますが、しなくても自動的に隠してくれます。ただ、HTMLが全部ロードし終わったあとに隠されるので少々目障りです。ですので、ローカルでもスタイルを指定しておきました。

これを作るにあたってjQueryでリストを開閉させたいをかなり参考にしました。っていうかほとんどそのまんま。まだJQueryは勉強中(するのか!?)なのでこんなしょぼいもんですみません。

コメント

  1. いろんな動的UIを自分で創れたら便利ですよね… JavaScriptの基本をまずは勉強してからjQueryって順番ですよね?
    こんな所で質問しちゃってすみません

    返信削除
  2. 「JavaScriptとPHPの違い」のお話がメチャクチャ参考になりました。イメージがあるうちに、さっそく取りかかってみます。

    ありがとうございました!

    返信削除
  3. あ、重要な違いたひとつありました。
    JavaScriptはデバッガが使えるってことです。

    Safariの開発者ツールについてるやつがおすすめです。ブレークポイントを張り込んでちゃんと実行されてるか確認したり、その時点での値をprintしなくても確認できます。

    例外が発生したときはphpのように表に例外情報は表示されませんが、デバッガを使うと例外の詳細を知ることができます。

    返信削除
  4. なるほど…PHPみたいにエラーメッセージを標準じゃ出してくれないんですね。デバッガも調べてみます。ありがとうございました。

    返信削除

コメントを投稿

このブログの人気の投稿

[Win]Xboxコントローラーのバッテリ残量確認と電源を切るツールXControllerTool

UWPアプリでSuicaの履歴を複数件読みだす方法