Definition Listをつくる。
- CSSを使って、形を整える。
- dtのfont-weightを太くする。
- ddには、適当な高さを設定しておく。
<dl>
<dt id="menuA">menu A</dt><dd>ここにメニューAの内容が入ります。</dd>
<dt id="menuB">menu B</dt><dd>ここにメニューBの内容が入ります。</dd>
<dt id="menuC">menu C</dt><dd>ここにメニューCの内容が入ります。</dd>
</dl>
手始めに、menuAのddを畳んでみる。
- dtをクリックした時に、を記述してみる。
- $(function(){});
- $('dt:first').on('click', function(){} );
- $('dt:first').sildeUp();
- まずは下の２つを合体して、$('dt:first').on('click', function(){$('dt:first').sildeUp();} );
- それから、最初のと合体すると、
- $(function(){$('dt:first').on('click', function(){$('dd:first').slideUp();} );});
初期設定する
- menu Aのddだけが開いた状態にしておく。
- 「１番目のddだけ開いている＝１番目以外を、.hide」
- $('dd:not(:first)').hide();
そして、とりかかる
- 「dt がクリックされたら、functionする」
- $('dt').on('click',function(){});
- 「もし、クリックされたdtの隣にあるddが見えてなければ」
- if($('+dd', this).css('display')=='none'){};
- 「いま見えているddをslideUpして」
- $('dd:visible').slideUp();
- 「クリックされたdtの隣にあるddをslideDownする。」
- $('+dd', this).slideDown();
- さぁ、まとめよう！
$(function(){
$('dd:not(:first)').hide();
$('dt').on('click',function(){
if($('+dd', this).css('display')=='none'){
$('dd:visible').slideUp();
$('+dd', this).slideDown();};
});
});
- ふぅ~、骨のある短文だ。
<body>
<dl>
<dt>menu A</dt><dd>ここにメニューAの内容が入ります。</dd></div>
<dt>menu B</dt><dd>ここにメニューBの内容が入ります。</dd></div>
<dt>menu C</dt><dd>ここにメニューCの内容が入ります。</dd></div>
</dl>
</div>
<script>
$(function(){
$('dd:not(:first)').hide();
$('dt').on('click', function(){
if($('+dd', this).css('display')=='none'){
$('dd:visible').slideUp();
$('+dd', this).slideDown();
};
});
});
</script>
</body>
