ということでソースを書いてみた。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryを始めてみる</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('div.example').hide();
$('div.trigger').click(function(){
$(this).next().slideToggle('fast');
});
})
</script>
</head>
<body>
<div class='trigger'>ここをクリックすると下部が開閉されるはず</div>
<div class='example'>
この部分が開閉されるはず！<br>
この部分が開閉されるはず！<br>
この部分が開閉されるはず！<br>
この部分が開閉されるはず！<br>
この部分が開閉されるはず！<br>
この部分が開閉されるはず！<br>
</div>
</body>
</html>
前回不明だった<div class='trigger'...内の<a タグは不明なので書かない、という方針。
それと、triggerの後ろを青くするのも紛らわしいのではずす。
$(this).toggleClass('active').next().slideToggle('fast');
...を
$(this).next().slideToggle('fast');
として動作確認。
うん、一応動作しますね。
ただ、triggerのタグの上にマウスカーソルを持って行っても指になりません。
その為の<a タグだったのだろうか…？ということで<a タグを入れてみる。
<div class='trigger'><a href="#ex">ここをクリックすると下部が開閉されるはず</a></div>
なるほど、リンクっぽく下線が付き、リンクカラーになって、オンマウスでカーソルも指になりますね。
その為の<a タグだったのだろうか…？ということで<a タグを入れてみる。
<div class='trigger'><a href="#ex">ここをクリックすると下部が開閉されるはず</a></div>
なるほど、リンクっぽく下線が付き、リンクカラーになって、オンマウスでカーソルも指になりますね。
まぁでも指にするだけなら、<a タグじゃなくて、triggerクラスをそのように書く方が良いように思う。
div.trigger{ cursor:pointer; }
</style>
マウスカーソルはオンマウスで指になりましたね。
それから $(this).next().slideToggle('fast'); って気持ち悪いですね。
<div class='trigger' に何もしないなら next()とか使わずに直接<div class='example' を指定して slideToggle を実行すべきでは？
とするとやっぱりこの $(this) が分からないことには手が付けられない。
ので、これを調べてみる。
『jquery $(this)』でググってみる。
「ずっと工事中」というページで、thisのjqueryでの書き方･･･とありました。
まぁつまり、$('div.trigger').click(function(){ の対象タグである <div class='tregger' のことなのでしょう。
ということは、これを書き換えるためには、<div class='example' を示せば良いわけで、それは $('div.example').hide(); の行の方法に沿ってみてはどうだろう？と考えて、以下のように書いてみた。
$('div.example').slideToggle('fast');
ちゃんと動作した。きっと正しい書き方なんだろぉ。
これで未解決の問題の２と３がまぁ大体（雑だけど）解けた。
あとは１番の 'example'の当たっているDIVタグ（長いなこの表現）は hide() で隠れています。いつの間に非表示⇒表示にしているのでしょう？ という謎が残っている。
試しに $('div.example').hide(); を消してみる。
を？元が表示されている状態だったのが、クリックすると消えるアニメーションが起きる。
ということは、slideToggle は対象の状態を見て、どちらのアニメーションをするのか決めていると言えるようだ。
まぁそんな事言っててもクリアにはならないので、slideToggle について調べてみよう。
またしても『jquery slideToggle』でググる。
「アルファシス – alphasis.info -」というページに以下のように書いてある。
「セレクター」の要素が非表示の場合、「セレクター」の要素を、「速度」に指定した速度で、「イージング関数名」に指定したイージング関数名の動作パターンのスライド・ダウン・アニメーションで表示し、その後、「コールバック関数」に指定した関数を実行する。「セレクター」の要素が表示されている場合、「セレクター」の要素を、「速度」に指定した速度で、「イージング関数名」に指定したイージング関数名の動作パターンのスライド・アップ・アニメーションで非表示にし、その後、「コールバック関数」に指定した関数を実行する。
ということで<a タグを外して、<header>タグ内に以下を追記。
<style>div.trigger{ cursor:pointer; }
</style>
マウスカーソルはオンマウスで指になりましたね。
それから $(this).next().slideToggle('fast'); って気持ち悪いですね。
<div class='trigger' に何もしないなら next()とか使わずに直接<div class='example' を指定して slideToggle を実行すべきでは？
とするとやっぱりこの $(this) が分からないことには手が付けられない。
ので、これを調べてみる。
『jquery $(this)』でググってみる。
「ずっと工事中」というページで、thisのjqueryでの書き方･･･とありました。
まぁつまり、$('div.trigger').click(function(){ の対象タグである <div class='tregger' のことなのでしょう。
ということは、これを書き換えるためには、<div class='example' を示せば良いわけで、それは $('div.example').hide(); の行の方法に沿ってみてはどうだろう？と考えて、以下のように書いてみた。
$('div.example').slideToggle('fast');
ちゃんと動作した。きっと正しい書き方なんだろぉ。
これで未解決の問題の２と３がまぁ大体（雑だけど）解けた。
あとは１番の 'example'の当たっているDIVタグ（長いなこの表現）は hide() で隠れています。いつの間に非表示⇒表示にしているのでしょう？ という謎が残っている。
試しに $('div.example').hide(); を消してみる。
を？元が表示されている状態だったのが、クリックすると消えるアニメーションが起きる。
ということは、slideToggle は対象の状態を見て、どちらのアニメーションをするのか決めていると言えるようだ。
まぁそんな事言っててもクリアにはならないので、slideToggle について調べてみよう。
またしても『jquery slideToggle』でググる。
「アルファシス – alphasis.info -」というページに以下のように書いてある。
「セレクター」の要素が非表示の場合、「セレクター」の要素を、「速度」に指定した速度で、「イージング関数名」に指定したイージング関数名の動作パターンのスライド・ダウン・アニメーションで表示し、その後、「コールバック関数」に指定した関数を実行する。「セレクター」の要素が表示されている場合、「セレクター」の要素を、「速度」に指定した速度で、「イージング関数名」に指定したイージング関数名の動作パターンのスライド・アップ・アニメーションで非表示にし、その後、「コールバック関数」に指定した関数を実行する。
とあるので、予想通りのようだ。
ふ～ん、便利ですねぇ。