//index.wxml

<view class="phone_one" bindtap="clickPerson">  
 <view class="phone_personal">{{firstPerson}}</view>  
 <image src="../../image/v6.png" class="personal_image {{selectArea ? 'rotateRight' :''}}"></image> //三目法判斷圖片要(yào / yāo)不(bù)要(yào / yāo)旋轉180。  
 </view>  
<view class="person_box">  
  <view class="phone_select" hidden="{{selectPerson}}">  
    <view bindtap="mySelect">測試1</view>  
    <view bindtap="mySelect">測試2</view>  
    <view bindtap="mySelect">測試3</view>  
  </view>  
</view>  

//index.js

<pre name="code" class="html">Page({  
 data:{  
  selectPerson:true,  
  firstPerson:'個(gè)人(rén)',  
  selectArea:false,  
  },  
 //點擊選擇類型  
 clickPerson:function(){  
  var selectPerson = this.data.selectPerson;  
  if(selectPerson == true){  
   this.setData({  
   selectArea:true,  
   selectPerson:false,  
 })  
  }else{  
   this.setData({  
   selectArea:false,  
   selectPerson:true,  
 })  
  }  
 } ,  
 //點擊切換  
 mySelect:function(e){  
  this.setData({  
   firstPerson:e.target.dataset.me,  
   selectPerson:true,  
   selectArea:false,  
  })  
 },  
}}</pre><pre name="code" class="html"></pre>//index.wxss  
[html] view plain copy
<pre name="code" class="html">.phone_personal{  
  width: 100%;  
  color:rgb(34, 154, 181);  
  height:100rpx;  
  line-height:100rpx;  
  text-align: center;  
}  
.phone_one{  
  display: flex; //用flex布局更方便。  
  position: relative;  
  justify-content: space-between;  
  background-color:rgb(239, 239, 239);  
  width:90%;  
  height:100rpx;  
  margin:0 auto;  
  border-radius: 10rpx;  
  border-bottom:2rpx solid rgb(255, 255, 255);  
}  
.person_box{  
  position: relative;  
}  
.phone_select{  
  margin-top:0;  
  z-index: 100;  
  position: absolute; //小程序中z-index和(hé / huò)absolute需要(yào / yāo)同時(shí)存在(zài)，元素才能脫離文檔。  
}  
.select_one{  
  text-align: center;  
  background-color:rgb(239, 239, 239);  
  width:676rpx;  //脫離文檔後元素width不(bù)能再用百分比。  
  height:100rpx;  
  line-height:100rpx;  
  margin:0 5%;  
  border-bottom:2rpx solid rgb(255, 255, 255);  
}  
.personal_image{  
  z-index: 100;  
  position: absolute;  
  right:2.5%;  
  width: 34rpx;  
  height: 20rpx;  
  margin:40rpx 20rpx 40rpx 0;  
  transition: All 0.4s ease;   
  -webkit-transition: All 0.4s ease;  
}  
.rotateRight{  
  transform: rotate(180deg); //180°旋轉圖片。  
}</pre>  
<p></p><pre name="code" class="html" style="font-size: 13.3333px;"></pre><p></p>  
<pre></pre>