实现javascript伸缩Nav

 学习javascript的时候，自己动手做了一个javascript应用：伸缩的导航。

主要知识点：获取触发事件句柄的元素，比如<div id='div1'， World</div>,当触发onclick事件时要获取该事件的元素，要用到'target'属性，像这样：event.target。而ie中要用'srcElement'属性获取触发该事件的元素。

js代码:

//<![CDATA[
            var slider = false;
            var num;
            window.onload = function(){
                document.getElementById('elements1').style.display = 'none';
                document.getElementById('elements2').style.display = 'none';
                for(var i=1 ; i<=2; i++){
                    document.getElementById('label'+i).onclick = showHideSlide;
                }
            }

            //响应click的事件句柄

            function showHideSlide(evnt){
                var theEvent = evnt ? evnt : window.event;
                var theSrc = theEvent.target ? theEvent.target : theEvent.srcElement;
                var item = 'elements'+theSrc.id.substr(5,1);
                var toggleNav = document.getElementById(item);
                if(slider == false){
                    toggleNav.style.display = 'block';
                    slider = true;
                }else{
                    toggleNav.style.display = 'none';
                    slider = false;
                }
            }


        //]]>

html:

<div id="label1" class="label">
    Name
</div>
<div class="elements" id="elements1">
    <label>First Name:</label><br /><input type="text" name="firstname" /><br /><br />
    <label>Last Name:</label><br /><input type="text" name="lastname" /><br /><br />
</div>
<div id="label2" class="label">
    Address
</div>
<div class="elements" id="elements2">
    <label>Address</label><br /><input type="text" name="address"><br /><br />
</div>