<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//EN" "http://www.w3.org/TR/html4/strict.dtd"> <br><html> <br><머리> <br><title>접을 수 있는 목록 — Take 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>커서: 'default', <br>'list-style-image':'none' <br>}) <br>}); <br></script> <br><스타일> <br>fieldset { 너비: 320px } <br></style> <br></head> <br><본문> <br><필드세트> <br><legend>접을 수 있는 목록 — 1개 가져오기</legend> <br><ul> <br><li>항목 1</li> <br><li>항목 2</li> <br><li> <br>항목 3 <br><ul> <br><li>항목 3.1</li> <br><li> <br>항목 3.2 <br><ul> <br><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></ul> <br></li> <br><li> <br>항목 4 <br><ul> <br><li>항목 4.1> <br><li> <br>항목 4.2 <br><ul> <br><li>항목 4.2.1</li> <br><li>항목 4.2.2</li> <br></ul> <br></li> <br></ul> <br></li> <br><li>항목 5</li> <br></ul> <br></fieldset> <br></body> <br></html> <br> </div> <br><br><br>상위 화면에서 사용할 수 있는 페이지가 없습니다. 지면 색자 체형의 대리석 바닥면의 대리석 ,同样可以实现上述功能: <br>$(this).children().toggle(); <br>$(this).css('list-style-image', <br>($(this).children().is(':hidden')) ? <br>'url(plus.gif) ' : 'url(minus.gif)'); 토글(속도,콜백) <br>속도: 可为数字或字符串,把效果的持续时间(可选)指定为毫秒数或预定义 字符串 지 일 : 느림, 보통 빠른 것입니다.传递给这个函数,但函数上下文(이것)被设置为以动画隐藏적원素. <br><br>动画效果的可折叠列表 <br><br><br><br><br>复代码<br><div class="codetitle"><span> 代码如下: <a style="CURSOR: pointer" data="21092" class="copybut" id="copybut21092" onclick="doCopy('code21092')"><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>접을 수 있는 목록 — Take 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>} <br>return false; {cursor:'pointer', <br>'list-style-image':'url(plus.gif)'}) <br>.children().hide() <br>$('li:not( :has(ul))').css({ <br>커서: '기본값', <br>'list-style-image':'none' <br>}) <br>}); <br></script> <br><스타일> <br>fieldset { 너비: 320px } <br></style> <br></head> <br><본문> <br><필드세트> <br><legend>접을 수 있는 목록 — Take 3</legend> <br><ul> <br><li>항목 1</li> <br><li>항목 2</li> <br><li> <br>항목 3 <br><ul> <br><li>항목 3.1</li> <br><li> <br>항목 3.2 <br><ul> <br><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></ul> <br></li> <br><li> <br>항목 4 <br><ul> <br><li>항목 4.1> <br><li> <br>항목 4.2 <br><ul> <br><li>항목 4.2.1</li> <br><li>항목 4.2.2</li> <br></ul> <br></li> <br></ul> <br></li> <br><li>항목 5</li> <br></ul> <br></fieldset> <br></body> <br></html> <br><br> </div></a></span></div>