Ji-seong's Tip & Tech

'메뉴' 에 사용할 때 좀더 유용하죠. 각 메뉴마다 일일이 이벤트 핸들러에 지정해줄 필요 없이 전체 메뉴를 DIV 등의 태그로 묶어준 후
적용시켜주면 됩니다.

<SCRIPT language="JavaScript">
function controlExpand() {
var sup = event.srcElement.id;
if (sup != '') {
var sub = document.all[(sup + "Sub")]
if (sub != null) {
if (sub.style.display == 'none')
sub.style.display = '';
else
sub.style.display = 'none';
}
}
}
</SCRIPT>

사용법은..위에 쓴 것 처럼 전체 메뉴를 DIV 등의 태그로 묶어서 이벤트 핸들러에 붙여 주고,
animal 이라는 메뉴가 있고 그 하위메뉴로 dog, cat 이 있다면
dog, cat 은 animalSub 라는 이름을 붙여주고 display를 none 으로 주면 됩니다.

하위메뉴가 좀더 늘어나도 상관없이 같은 방식으로 지정해주면 됩니다.

예제>
<DIV onClick="controlExpand()" style="cursor:hand">
<DIV id="Animal">Animal</DIV>
<DIV id="AnimalSub" style="display:none">
&nbsp; &nbsp; cat<BR>
<DIV id="dog">&nbsp; &nbsp; dog</DIV>
<DIV id="dogSub" style="display:none">
&nbsp; &nbsp; &nbsp; &nbsp; eatable<BR>
&nbsp; &nbsp; &nbsp; &nbsp; pet<BR>
</DIV>
</DIV>
<DIV id="Plants">Plants</DIV>
<DIV id="PlantsSub" style="display:none">
<DIV id="rose">&nbsp; &nbsp; Rose</DIV>
<DIV id="roseSub" style="display:none">
&nbsp; &nbsp; &nbsp; &nbsp; white<BR>
&nbsp; &nbsp; &nbsp; &nbsp; black<BR>
&nbsp; &nbsp; &nbsp; &nbsp; red<BR>
</DIV>
&nbsp; &nbsp; Lily<BR>
</DIV>
</DIV>