|
|
Outline
Описание: Вы можете создать подобное развертывание списков.
Скрипт:<![CDATA[
<HTML>
<HEAD>
<TITLE>Expanding and Collapsing Outline</TITLE>
<STYLE TYPE="text/css">
/* Outline Style Sheet */
UL {cursor: hand;
color: navy}
UL UL {display: none;
margin-left: 5pt}
.leaf {cursor: text; color: black}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function checkParent(src, dest) {
// Search for a specific parent of the current element
while (src!=null) {
if (src.tagName == dest) return src;
src = src.parentElement;
}
return null;
}
function outline() {
// Expand or collapse if a list item is clicked.
var open = event.srcElement;
// Make sure clicked inside an LI. This test allows rich HTML inside lists.
var el = checkParent(open, "LI");
if (null!=el) {
var pos = 0;
// Search for a nested list
for (var pos=0; pos<el.children.length; pos++) {
if ("UL"==el.children[pos].tagName) break;
}
if (pos==el.children.length) return;
} else return;
el = el.children[pos];
if ("UL"==el.tagName) {
// Expand or Collapse nested list
if (""==el.style.display) {
el.style.display = "block";
}
else
{
el.style.display = "";
}
}
event.cancelBubble = true;
}
document.onclick = outline;
</SCRIPT>
</HEAD>
<BODY>
<H1>Expanding and Collapsing Outline</H1>
<UL >
<LI STYLE="cursor:hand">Item 1
<UL>
<LI class=leaf>Subitem 1
<LI>Subitem 2
<UL>
<LI class=leaf>Subsubitem 1
</UL>
</UL>
</LI>
<LI class=leaf>Item 2
</UL>
</html>
]]>
| |
|
