JavaScript 定義リスト <dl><dt><dd> 開閉
アメブロ向上企画書ノート とりあえず形になった記念？
で・・・ 今回はFQAで使っている↓これっ・・・・開閉させます
やり方の説明です
フリープラグインに・・・
<script type="text/javascript"><!--
$(function(){
$(".fqa dt").click(function(){
$(this).toggleClass("dtcl");
$("+dd",this).slideToggle("normal");
});
});
//--></script>
※開閉画像（アイコン）をつけない場合は
$(this).toggleClass("dtcl");
これは必要ありません
CSSに・・・・前回のとほとんどダブっいますが・・
/*FQA*/
.fqa{
padding:10px 20px;/*A B*/
}
.fqa dl{
width: 375px;/*C*/
}
.fqa dl dt{
margin-top:10px;/*D*/
padding:1px 0 1px 10px;/*E 0 F G*/
font-size:1.2em;/*文字サイズ*/
background:#cccccc;/*背景色 H*/
cursor:pointer;
}
.fqa dl dd{
margin:0;
padding:10px;/* I */
border:1px solid #cccccc;/* J */
display:none;
}
/*開閉画像 開閉画像をつけない場合は必要ありません↓*/
.fqa dl dt.dtop{/*開・＋ 画像*/
background-image: url(画像のURL);
background-repeat: no-repeat;
background-position:360px center;/*表示位置 K*/
}
.fqa dl dt.dtcl{/*閉・－ 画像*/
background-image: url(画像のURL);
background-repeat: no-repeat;
background-position:360px center;/*表示位置 K*/
}
前回のと違うのは・・開閉画像のＣＳＳ（水色部分）と
.fqa dl dd{
display:none;
}
最初は表示しないように display:none;を設定しています
それと・・
.fqa dl dt{
cursor:pointer;
}
見出しにマウスがのった時にクリックして～ってハンドに変わるように
開閉画像（アイコン）をつける場合は・・・
←このような画像を用意します（これを使う場合は自分の画像フォルダにアップして下さい）
または↓アメブロで使っている画像をお借りしちゃいます（画像のURLはないしょで？そのまま使います）
http://stat100.ameba.jp/p_skin/rabbit_paper/img/icon_on.gif
http://stat100.ameba.jp/p_skin/rabbit_paper/img/icon_off.gif
http://stat100.ameba.jp/p_skin/sss_02/img/icon_on.gif
http://stat100.ameba.jp/p_skin/sss_02/img/icon_off.gif
http://stat100.ameba.jp/p_skin/sss_02_sevencolors/img/icon_on.gif
http://stat100.ameba.jp/p_skin/sss_02_sevencolors/img/icon_off.gif
http://stat100.ameba.jp/p_skin/sss_02_dark/img/icon_on.gif
http://stat100.ameba.jp/p_skin/sss_02_dark/img/icon_off.gif
http://stat100.ameba.jp/p_skin/sss_04/img/icon_on.gif
http://stat100.ameba.jp/p_skin/sss_04/img/icon_off.gif
http://stat100.ameba.jp/p_skin/sss_05/img/title_on.gif
http://stat100.ameba.jp/p_skin/sss_05/img/title_off.gif
※なぜか？onとoffで+と-が違っている場合もありますから注意下さい
開閉画像（アイコン）の表示位置
background-position:right center;/*表示位置 K*/
コレでは端すぎます
background-position:360px center;/*表示位置 K*/
左からの位置を決めます
※上のCSSの例で横幅 width: 375px;/*C*/ の場合360pxくらいということです
実際に見ながら調整下さい
また・・他を開いたときにすでに開かれているのを自動で閉じるようにも出来ますが・・
使いにくかったのでやめた方がいいです
クリックしたときにそれより上が開いていた場合・・
上が閉じられて縮むことにより見たい部分が上にずれてしまいます
HTMLに書くときは・・
<dl>
<dt>定義リストって？</dt>
<dd>定義リスト<dl>は用語<dt>とその説明（定義）<dd>から構成</dd>
<dt>どんなときに使うのか？</dt>
<dd>FQA(Q&A)や用語集などで使うと便利です</dd>
<dt>・・・・・</dt>
<dd>・・・・・・・・・・・です</dd>
</dl>
<dt>用語・見出し</dt>
<dd>説明や内容</dd>
このセットをまとめて <dl> と </dl> の中に入れます
HTMLにはそのまま < や > などは書くことは出来ません
はじめに記事を書くで表示したいように書いてしまいます
そのとき文字色やリンクなども貼っちゃって完成形にしちゃってください
形が出来ましたら HTMLタグを表示にして HTMLタグをまるまるコピー
（コピーしたら記事は必要ありませんのでそのまま終了させてください）
コピーした部分を <dd> と </dd> の間に貼り付けます
<dt>定義リストって？</dt>
<dd><p>定義リスト<font color="#ff0000"><dl></font>は用語<font color="#ff0000"><dt></font>とその説明（定義）<font color="#ff0000"><dd></font>から構成</p>
<p><a href="http://ameblo.jp/plan-note" target="_blank">アメブロ向上企画書ノート</a>
</p></dd>
フリープラグインにすでに入っているものとかち合って動作しない場合があります
その場合はフリープラグインに書く順番を変えると動作する場合があります
それでも動作しない場合は・・ あきらめましょう？
（このブログでは動作しませんでした・・・ 面倒だったのであっさりあきらめました？）