按钮点击展开菜单列表-前端--易笔记

首先我们定义一个button按钮和一个菜单列表，我们把他们封装到一个块级元素中，并指定position属性，其次我们对button定义一个选择器，来设置其样式：

<html>
 <head></head>
 <body>
  <p style="position: relative;"> 
   <button class="button-menu" (click)="showButtonList()" (blur)="hiddenList()">button</button> 
   <ul *ngif="_showbuttonlist"> 
    <li><a href="">aaa</a> </li> 
    <li><a href="">bbb</a> </li> 
    <li><a href="">ccc</a> </li> 
   </ul> 
  </p>
 </body>
</html>

在button里面我们添加click事件和失去焦点事件，让控制菜单的show和隐藏

然后我们定义监听事件要做的事情：

showButtonList(){
      this._showbuttonlist = this._showbuttonlist?false:true;
  }
hiddenList(){
      this._showbuttonlist = false;
  }

最后我们只要设置一下样式就可以：

第一我们设置一下按钮的属性

.button-menu {
width: 100px;
height: 36px;
background-color: white;
color: red;
border-radius: 4px;
border: 1px solid blue;
position: absolute;
}

第二我们设置一下列表的按钮属性

.button-menu + ul li {
width: 100px;
height: 36px;
background-color: white;
color: red;
border-radius: 4px;
border: 1px solid blue;
z-index: 1000;
list-style: none;
}

第三我们设置一下列表的属性

.list-menu {
margin-top: 36px;
position: absolute;
}

.button-menu + ul li a {
text-decoration: none;
}

时间：2016/12/28 10:47:57