<div class="codetitle"> <span><a style="CURSOR: pointer" data="29378" class="copybut" id="copybut29378" onclick="doCopy('code29378')"><u>复制代</u></a></span> 代码如下:</div> <div class="codebody" id="code29378"> <br><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//JA" "http://www.w3.org/TR/html4/strict.dtd"> <BR><html> <BR><頭> <BR><title>折りたたみ可能なリスト — テイク 1</title> <br><link rel="stylesheet" type="text/css" href="../common.css"> <br><script type="text/javascript" <BR>src="../scripts/jquery-1.2.1.js"></script> <br><script type="text/javascript"> <br>$(function(){ <br>$('li:has(ul)') <br>.click(function(event){ <br>if (this ==event.target) { <br> if ($(this).children().is(':hidden')) { <br>$(this) <br>.css('list-style-image','url(minus.gif)') <br>.children().show(); <br>} <br>else { <br>$(this) <br>.css('list-style-image','url(plus.gif)' ) <br>.children().hide(); <br>} <br>} <br>return false; <br>}) <br>.css('cursor','pointer') <br>。 click(); <br>$('li:not(:has(ul))').css({ <br>カーソル: 'デフォルト', <br>'リストスタイルイメージ':'なし' <br>});<br>}); <br></script> <br> <br>フィールドセット { width: 320px } <br></style> <br></head> <br> <br><フィールドセット> <br><legend>折りたたみ可能なリスト — Take 1</legend> <br><ul> <br><li>項目 1</li> <br><li>項目 2</li> <br><li> <br>項目 3 <br><ul> <br> </li> <li>項目 3.1</li> <br><li> <br>項目 3.2 <br><ul> <br> </li> <li>項目 3.2.1</li> <br><li>項目 3.2.2</li> <br><li>項目 3.2.3</li> <br> </ul> <br></li> <br><li>項目 3.3</li> <br> <br></li> <br><li> <br>項目 4 <br><ul> <br> </li> <li>項目 4.1</li> <br><li> <br>項目 4.2 <br><ul> <br> </li> <li>項目 4.2.1</li> <br><li>項目 4.2.2</li> <br> <br></li> <br> <br></li> <br><li>項目 5</li> <br> <br></fieldset> <br></body> <br></html> <br> </div> <br><br><br> 上の実現リストの変更はほぼ解決されていますが、jQuery には要素状態を切り替える関数 toggle() が提供されています。上の色の文字のコードは次のコードに変更されます。 ，同様に上記の機能を実現できます： <br>$(this).children().toggle(); <br>$(this).css('list-style-image', <br>($(this).children().is(':hidden')) ? <br>'url(plus.gif) ' : 'url(minus.gif)'); <br>} <br>上記の 3 つの関数数 show()、hide()、toggle() パラメータの状況下では、段階的に表示と隐藏が可能です。 <br>hide(speed,callback) <br>show( Speed,callback) <br>toggle(speed,callback) <br>speed: 数字または文字列、ハンドル効果の持続時間 (選択可能) は秒数または指定された文字列のうちの 1 つを指定します: 遅い、通常<br>callback: 関数を返します (オプション)。アニメーションが完了したときに使用されます。 <br><br>アニメーション効果の折り曲げ可能リスト <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="21092" class="copybut" id="copybut21092" onclick="doCopy('code21092')"><u>代打</u></a></span>代打: </div> <div class="codebody" id="code21092"> <br><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <BR><html> <BR><頭> <BR><title>折りたたみ可能なリスト — テイク 3</title> <br><link rel="stylesheet" type="text/css" href="../common.css"> <br><script type="text/javascript" <BR>src="../scripts/jquery-1.2.1.js"></script> <br><script type="text/javascript"> <br>$(function(){ <br>$('li:has(ul)') <br>.click(function(event){ <br>if (this ==event.target) { <br> $(this).css('list-style-image', <br>(!$(this).children().is(':hidden')) ? <br>'url(plus.gif)' : 'url(minus.gif)'); <br>$(this).children().toggle('slow'); <br>return false; {cursor:'pointer', <br>'list-style-image':'url(plus.gif)'}) <br>.children().hide(); <br>$('li:not( :has(ul))').css({ <br>カーソル: 'default', <br>'list-style-image':'none' <br>}); <br></script> <br> <br>フィールドセット { width: 320px } <br></style> <br></head> <br> <br><フィールドセット> <br><legend>折りたたみ可能なリスト — テイク 3</legend> <br><ul> <br><li>項目 1</li> <br><li>項目 2</li> <br><li> <br>項目 3 <br><ul> <br> </li> <li>項目 3.1</li> <br><li> <br>項目 3.2 <br><ul> <br> </li> <li>項目 3.2.1</li> <br><li>項目 3.2.2</li> <br><li>項目 3.2.3</li> <br> </ul> <br></li> <br><li>項目 3.3</li> <br> <br></li> <br><li> <br>項目 4 <br><ul> <br> </li> <li>項目 4.1</li> <br><li> <br>項目 4.2 <br><ul> <br> </li> <li>項目 4.2.1</li> <br><li>項目 4.2.2</li> <br> <br></li> <br> <br></li> <br><li>項目 5</li> <br> <br></fieldset> <br></body> <br></html> <br><br> </div>
