() (2) |
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </script> <script> $(function() { $("#cat p").hide(); $("#cat h4").click(function() { $(this).next("p").slideToggle("slow").siblings("p:visible") .slideUp("slow"); }); }); </script>
:
<div id="cat"> <h4><a href="#"> </a></h4> <p> <a href="#"> 1</a><br> <a href="#"> 2</a><br> <a href="#"> 3</a><br> </p> <h4><a href="#"> </a></h4> <p> <a href="#">-</a><br> <a href="#">-</a><br> </p> <h4><a href="#"> </a></h4> <p> <a href="#"> </a><br> <a href="#"> </a><br> <a href="#"> </a><br> <a href="#"> </a><br> </p> </div>
- css margin:0 h4 ( head, ).
h4 ...
<style type="text/css"> h4 {margin:0;} </style>
: html |
() (1) |
|
() . , javascript:
- 100% DataLife Engine (DLE)
" ?" " ?"
HEAD:
<script type="text/javascript"> /*********************************************** * Contractible Headers script- © Dynamic Drive (www.dynamicdrive.com) * This notice must stay intact for legal use. Last updated Mar 23rd, 2004. * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off) var collapseprevious="no" //Collapse previously open content when opening present? (yes/no) if (document.getElementById){ document.write('<style type="text/css">') document.write('.switchcontent{display:none;}') document.write('</style>') } function getElementbyClass(classname){ ccollect=new Array() var inc=0 var alltags=document.all? document.all : document.getElementsByTagName("*") for (i=0; i<alltags.length; i++){ if (alltags[i].className==classname) ccollect[inc++]=alltags[i] } } function contractcontent(omit){ var inc=0 while (ccollect[inc]){ if (ccollect[inc].id!=omit) ccollect[inc].style.display="none" inc++ } } function expandcontent(cid){ if (typeof ccollect!="undefined"){ if (collapseprevious=="yes") contractcontent(cid) document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none" } } function revivecontent(){ contractcontent("omitnothing") selectedItem=getselectedItem() selectedComponents=selectedItem.split("|") for (i=0; i<selectedComponents.length-1; i++) document.getElementById(selectedComponents[i]).style.display="block" } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function getselectedItem(){ if (get_cookie(window.location.pathname) != ""){ selectedItem=get_cookie(window.location.pathname) return selectedItem } else return "" } function saveswitchstate(){ var inc=0, selectedItem="" while (ccollect[inc]){ if (ccollect[inc].style.display=="block") selectedItem+=ccollect[inc].id+"|" inc++ } document.cookie=window.location.pathname+"="+selectedItem } function do_onload(){ uniqueidn=window.location.pathname+"firsttimeload" getElementbyClass("switchcontent") if (enablepersist=="on" && typeof ccollect!="undefined"){ document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0" firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load if (!firsttimeload) revivecontent() } } if (window.addEventListener) window.addEventListener("load", do_onload, false) else if (window.attachEvent) window.attachEvent("onload", do_onload) else if (document.getElementById) window.onload=do_onload if (enablepersist=="on" && document.getElementById) window.onunload=saveswitchstate </script>
:
<h3 onclick="expandcontent('sc1')" style="cursor:hand; cursor:pointer"> 1</h3> <div id="sc1" class="switchcontent"> , , XVIII . <em></em>. , .</div> <h3 onclick="expandcontent('sc2')" style="cursor:hand; cursor:pointer"> 2</h3> <div id="sc2" class="switchcontent"> , , XVIII . <em></em>. , .</div> <h3 onclick="expandcontent('sc3')" style="cursor:hand; cursor:pointer"> 3</h3> <div id="sc3" class="switchcontent"> , , XVIII . <em></em>. , .</div>
: html |
|
|
. "onclick="show('hidden_1',200,5)" . ( 5) , ( 3).
<div><a href="#open1" onclick="show('hidden_1',200,5)"> 1</a></div> <div id=hidden_1 style="display:none;height:200px;width:350px;background-color:#f0f0f0"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div><a href="#open2" onclick="show('hidden_2',200,3)"> 2</a></div> <div id=hidden_2 style="display:none;height:200px;width:350px;background-color:#f0f0f0"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <script language="JavaScript" type="text/javascript"> /*<![CDATA[*/ var s=[],s_timer=[]; function show(id,h,spd) { s[id]= s[id]==spd? -spd : spd; s_timer[id]=setTimeout(function() { var obj=document.getElementById(id); if(obj.offsetHeight+s[id]>=h){obj.style.height=h+"px";obj.style.overflow="auto";} else if(obj.offsetHeight+s[id]<=0){obj.style.height=0+"px";obj.style.display="none";} else {obj.style.height=(obj.offsetHeight+s[id])+"px"; obj.style.overflow="hidden"; obj.style.display="block"; setTimeout(arguments.callee, 10); } }, 10); } /*]]>*/ </script>
: html |
| : | [1] |