通过点击图标/按钮处理一级菜单的显示和隐藏

HTML部分代码段:


			
  • CSS:


    #addPerson{
    	width:60px;
    	height:30px;
    	background:url(../images/add.png) no-repeat;
    	position:absolute;
    	top:8px;
    	right:-24px;
    }
    #menuItems{
    	width:140px;
    	height:124px;
    	position:absolute;
    	top:32px;
    	right:10px;
    	line-height:30px;
    	text-align: center;
    	z-index:10;
    	color:#ff9900;
    	background-color:#F7F7F7;
    	display:none;
    }
    #menuItems li{
    	border-bottom:1px solid #ddd;
    }
    #menuItems li:hover{
        background-color:#fff;
    }

    js代码:(用jQuery实现)


    $(document).ready(function(){
      $("#addPerson").click(function(){
          $("#menuItems").toggle();
      });
    });

    你可能感兴趣的:(JavaScript)