jQueryで記事を折りたたむ

by Teruaki Tsubokura 0 Comments

↑記事の上下にあるバー(文字以外の場所)をクリックすると記事を折りたためるようにしました。
久しぶりの更新ですが、最近javascriptを触るようになり、fc2ブログでもjsを使う方法がわかったので実装してみました。
使ったのはjQueryというJavaScriptライブラリですが、これを使えばWeb上で見かける動的な演出を簡単に使う事ができるようです。本当に簡単なのでその方法を解説していきたいとおもいます。
①jQueryをダウンロードする。
公式HP(http://jquery.com/)からjQueryをダウンロードして適当な場所に保存。(ファイル名はjquery.jsとします)
②保存したjquery.jsをサーバーにアップロードする。
■普通のサーバーで使用する場合
FTPソフト等で自分のホームページと同じ場所へアップロードする。
フォルダを作って/js/jquery.jsとかにしてもOK
fc2ブログで使う場合
管理ページ>ファイルのアップロードからjquery.jsをアップロードする。
アップロードしたパス(アドレス)をコピーしておいてください。
③htmlにjQueryを参照するタグを追加する。
HTMLの<head>タグの中に

<script type="text/javascript" src="○○○○○/jquery.js"></script>

と追加して、先ほどコピーしたアドレスを○○○の部分へ入れてください。
④続いて反映させたい効果を書いていく。
今回はこのサイトにも実装した、スライドトグル(折りたたみ)をつけてみたいと思います。
とりあえず<head>タグ内の先ほど書いた記述に続けて↓の8行を貼り付けてください。

<script type="text/javascript">
$(document).ready(function(){
$("dt").click(function(){
var index = $("dt").index(this);
$("dd").eq(index).slideToggle("slow");
}).css("cursor","pointer");
});
</script>

これを解説していきますね。↓↓↓

$("dt").click(function(){

dtをクリックした時に実行する処理ってこと。

var index = $("dt").index(this);

何番目のdtなのかをindexに保存。

$("dd").eq(index).slideToggle("slow");

 ↑    ↑         ↑
どれか  何番目か     開閉の早さ
となっているのでこの文だと・・・
dtがクリックされたら、index番目のddをslowの速さで開閉する」ということになります。
最後に・・・
⑤HTMLの中で<dl><dt><dd>タグを書く。

<dl>
<dt>クリックしてね</dt>
<dd>
中身が
<br>
開閉
<br>
するよ
<br>
!!!
</dd>
</dl>

試しにこんな感じに書くだけでなんとなんと、アニメーション付の開閉記事がつくれちゃう訳です。
実際に動かすとこうなります↓

クリックしてね
中身が
開閉
するよ
!!!

ちなみにfc2ブログの記事を開閉したい場合は、
記事のタイトルがクラス「entry_header」、
記事の中身がクラス「entry_body」という名前なので、
名前の前にクラスをあらわす「.」ドットをつけて、

$(".entry_header").click(function(){
var index = $(".entry_header").index(this);
$(".entry_body").eq(index).slideToggle("slow");

という感じになります。
これであなたのホームページもひとつ上へレベルアップ!

Leave a reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください