スライド開閉式の多階層（入れ子）の順不同リストを、jQueryで作る方法。
実装例（サンプル）
項目１
項目１－１
項目１－２
項目１－２－１
項目１－２－２
項目１－３
項目１－４
項目１－４－１
項目１－４－２
項目２
項目２－１
項目２－２
項目２－２－１
項目２－２－２
項目２－３
項目３
項目３－１
項目３－２
項目３－３
実装例（サンプル）の動作について
入れ子になっているリスト項目には、「+」が追加されている。「+」が追加されている項目をクリックすると、入れ子になっているリストを、スライドダウンで開き、「+」を「-」に変更する。再度クリックすると、入れ子になっているリストを、スライドアップで閉じ、「-」を「+」に変更する。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-sample li' ) . toggle(
function () {
jQuery( '> ul' ,this ) . slideDown( 'slow' );
jQuery( '> p > span' ,this ) . text( '-' );
},
function () {
jQuery( '> ul' ,this ) . slideUp( 'slow' );
jQuery( '> p > span' ,this ) . text( '+' );
}
);
jQuery( '#jquery-sample li:has(ul) > p' )
. css( {
cursor: 'pointer',
} )
. append( '<span>+</span>' );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample li' ) . toggle(
function () {
jQuery( '> ul' ,this ) . slideDown( 'slow' );
jQuery( '> p > span' ,this ) . text( '-' );
},
function () {
jQuery( '> ul' ,this ) . slideUp( 'slow' );
jQuery( '> p > span' ,this ) . text( '+' );
}
);
jQuery( '#jquery-sample li:has(ul) > p' )
. css( {
cursor: 'pointer',
} )
. append( '<span>+</span>' );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-sample li ul {
display: none;
}
#jquery-sample span {
margin: 0 1em;
padding: 0px 5px;
font-size: 10px;
background-color: #f1f1f1;
border: 1px solid gray;
border-radius: 5px;
}
-->
</style>
<!--
#jquery-sample li ul {
display: none;
}
#jquery-sample span {
margin: 0 1em;
padding: 0px 5px;
font-size: 10px;
background-color: #f1f1f1;
border: 1px solid gray;
border-radius: 5px;
}
-->
</style>
HTML
<ul id="jquery-sample">
<li><p>項目１</p>
<ul>
<li><p>項目１－１</p></li>
<li><p>項目１－２</p>
<ul>
<li><p>項目１－２－１</p></li>
<li><p>項目１－２－２</p></li>
</ul>
</li>
<li><p>項目１－３</p></li>
<li><p>項目１－４</p>
<ul>
<li><p>項目１－４－１</p></li>
<li><p>項目１－４－２</p></li>
</ul>
</li>
</ul>
</li>
<li><p>項目２</p>
<ul>
<li><p>項目２－１</p></li>
<li><p>項目２－２</p>
<ul>
<li><p>項目２－２－１</p></li>
<li><p>項目２－２－２</p></li>
</ul>
</li>
<li><p>項目２－３</p></li>
</ul>
</li>
<li><p>項目３</p>
<ul>
<li><p>項目３－１</p></li>
<li><p>項目３－２</p></li>
<li><p>項目３－３</p></li>
</ul>
</li>
</ul>
<li><p>項目１</p>
<ul>
<li><p>項目１－１</p></li>
<li><p>項目１－２</p>
<ul>
<li><p>項目１－２－１</p></li>
<li><p>項目１－２－２</p></li>
</ul>
</li>
<li><p>項目１－３</p></li>
<li><p>項目１－４</p>
<ul>
<li><p>項目１－４－１</p></li>
<li><p>項目１－４－２</p></li>
</ul>
</li>
</ul>
</li>
<li><p>項目２</p>
<ul>
<li><p>項目２－１</p></li>
<li><p>項目２－２</p>
<ul>
<li><p>項目２－２－１</p></li>
<li><p>項目２－２－２</p></li>
</ul>
</li>
<li><p>項目２－３</p></li>
</ul>
</li>
<li><p>項目３</p>
<ul>
<li><p>項目３－１</p></li>
<li><p>項目３－２</p></li>
<li><p>項目３－３</p></li>
</ul>
</li>
</ul>