实践笔记1

背景：由于毕业设计要求，现打算实现一个摄影网页，目前阶段实现网页布局

布局分为两部分，主页和菜单栏，菜单栏一开始先隐藏，通过主页按钮来点击显示。

这篇先从解决菜单栏的显示/隐藏的功能：

<div id="left">
  <button id="showRBtn"></button>
  </div>
  <div id="right">
      <div id="logoDiv">
        
      </div>
      <div id="cusInfo">
      </div>
      <div id="menuDiv">
         <ul>
          <li><a>MyPage</a></li>
          <li><a>Moment</a></li>
          <li><a>Find Modal</a></li>
          <li><a>Find Photpgrapher</a></li>
          <li><a>Contact us</a></li>
         </ul>
      </div>
      <div>

其中javascript实现功能代码如下：

var showMe=document.getElementById("showRBtn");
var showRight=function(){
    var right=document.getElementById("right");  //获取元素
    if(right.style.display!=="block") {    //下面有解释
        right.style.display="block";
        }else{
        right.style.display="none";
             }
}
showMe.addEventListener("click",showRight,false);   //添加事件处理程序，接受3个参数，分别为事件类型，事件函数以及Boolean（是否冒泡）

if条件语句为了判断该菜单栏是否已经显示，若为false则更改属性，否则隐藏属性。(主要实现toggle功能，方便用户隐藏以及显示菜单)

通过为按钮绑定事件处理程序，从而使菜单栏显示。

第一次写博文先到此为止，以后准备更充足再接再励。

值得注意的是，本文的事件处理程序没有进行跨浏览器兼容处理（attach()/on+"type"事件），往后可能会记录EventUtil的笔记。

*多多指教，attach()方法好像写错方法名. =>attachEvent