小程序写菜单切换 以及点击菜单的图片切换

1.需求：

    点击左边的科室选择，出现对应的科室二级菜单。并且图片样式切换为当前点击状态。

2.问题：

 小程序的背景图需要用在线图片，所以我这里用的是<image>不是背景图。因此图片的状态切换不能用hover

以下为js

Page({
  data: {
    keshi:[
      {imgUrl:"../../images/leftbar_body.png",keshiname:"内科",idName:"neike",clickUrl:"../../images/leftbar_body_pre.png"},
      {imgUrl:"../../images/leftbar_body.png",keshiname:"外科",idName:"waike",clickUrl:"../../images/leftbar_body_pre.png"},
      {imgUrl:"../../images/leftbar_head.png",keshiname:"妇产科",idName:"fcke",clickUrl:"../../images/leftbar_head_pre.png"},
      {imgUrl:"../../images/leftbar_body.png",keshiname:"男科",idName:"nanke",clickUrl:"../../images/leftbar_body_pre.png"},
      {imgUrl:"../../images/leftbar_head.png",keshiname:"儿科",idName:"erke",clickUrl:"../../images/leftbar_head_pre.png"},
      {imgUrl:"../../images/leftbar_body.png",keshiname:"皮肤科",idName:"pifuke",clickUrl:"../../images/leftbar_body_pre.png"}
    ],
    waike:["普通外科","神经外科","心胸外科","泌尿外科","心血管外科","乳腺外科","肝胆外科","器官移植","肛肠外科","烧伤科","骨伤科"],
    neike:["普通内科","内科2","内科3","内科4","内科5","内科6","内科7","内科8","内科9","内科10","内科11"],
    fcke:["妇产科1","妇产科2","妇产科3","妇产科4","妇产科5","妇产科6","妇产科7","妇产科8","妇产科9","妇产科10","内科11"],
    nanke:["男科1","男科2","男科3","男科4","男科5","男科6","男科7","男科8","男科9","男科10","男11"],
    erke:["儿科1","儿科2","儿科3","儿科4","儿科5","儿科6","儿科7","儿科8","儿科9","儿科10","儿11"],
    pifuke:["皮肤科1","皮肤科2","皮肤科3","皮肤科4","皮肤科5","皮肤科6","皮肤科7","皮肤科8","皮肤科9","皮肤科10","男11"],
    flag:"waike",
    imgindex:"1"
  },
  // 选择科室
  select:function(e){
    this.setData({
      flag:e.currentTarget.id,
      //这里的imgindex也就是科室菜单的index
      imgindex:e.currentTarget.dataset.index
    });
  }
})

以下为wxml

<!--pages/officeSelect/index.wxml-->
<view class="main">

	<!--左边的科室选择栏-->
   <view class="left leftbar">
   			<!-- 在js data中定义了keshi 用来循环放置-->
   		<block wx:for="{{keshi}}">
   				<!-- 给每个科室加id名 以及传送一个index  绑定点击选择事件 -->
	   		<view class="item" id="{{item.idName}}" data-index="{{index}}" bindtap="select">
	   			<!-- 点击后获取当点击的index并赋值给imgindex  让对应的index图片显示 -->
	   			<!-- imgindex==index为点击了 让当前图片显示为点击状态clickUrl 否则显示为imgUrl -->
	   			<image src="{{item.clickUrl}}" wx:if="{{imgindex==index}}" class="img"></image>
	   			<image src="{{item.imgUrl}}" wx:elif="{{imgindex!=index}}" class="img"></image>
	   			<text>{{item.keshiname}}</text>
	   		</view>
   		</block>
   </view>

   <!-- 当点击某个科室 就给flag赋值为科室名 判断flag为对应的科室名时就显示对应的二级菜单 -->
   <view class="left rightbar" wx:if="{{flag=='waike'}}" > 
   		<block wx:for="{{waike}}">
	   		<text>{{item}}</text>
   		</block>
   	</view>
   	<view class="left rightbar"  wx:if="{{flag=='neike'}}">	
   		<block wx:for="{{neike}}">
	   		<text>{{item}}</text>
   		</block>
   </view>
   <view class="left rightbar"  wx:if="{{flag=='fcke'}}">	
   		<block wx:for="{{fcke}}">
	   		<text>{{item}}</text>
   		</block>
   </view> 
   <view class="left rightbar"  wx:if="{{flag=='nanke'}}">	
   		<block wx:for="{{nanke}}">
	   		<text>{{item}}</text>
   		</block>
   </view>
   <view class="left rightbar"  wx:if="{{flag=='erke'}}">	
   		<block wx:for="{{erke}}">
	   		<text>{{item}}</text>
   		</block>
   </view>
   <view class="left rightbar"  wx:if="{{flag=='pifuke'}}">	
   		<block wx:for="{{pifuke}}">
	   		<text>{{item}}</text>
   		</block>
   </view>
</view>