小程序 点击显示隐藏

先看效果：

HTML

<view class='maxview'>
	<view class='view_le'>
	<view bindtap='hideBu'>{{whole}}</view>
	<view bindtap='showButton'>{{One_way}}</view>
</view>
<view class="view_imgs {{showView?'show':'hide'}}">
    <view>{{classification}}</view>
    <image src='imgs/4.jpg'></image>
</view>
<view class="view_imgs {{showView?'hide':'show'}}">
    <view>{{One_way}}</view>
	<image src='imgs/5.jpg'></image>
</view>
</view>

CSS

/* 显示  隐藏 */
.hide {
  display: none;
}

.show {
  display: block;
}
/* 显示  隐藏 */




.maxview{
  margin: 0 auto;
  width: 98%;
}
.view_le{
  width: 30%;
  display: inline-block;
  float: left;
}
.view_le view{
  color: rgb(0, 0, 0);
  text-align: center;
  background-color: rgb(255, 254, 254);
  height: 60px;
  border-bottom: 1px solid rgb(216, 216, 216);
  line-height: 58px;
}
.view_imgs{
  width: 68%;
  background-color: khaki;
  float: right;
}
.view_imgs image{
  width: 100%;
}

JS

Page({
  data: {
    showView: true,
    whole:"全部",
    One_way: "单向图片",
 },
  showButton: function() {
    var that = this;
    that.setData({
      // showView: (!that.data.showView)
      showView:(false)
    });
    // console.log(!that.data.showView);
    //这句可试试  点击同一个按钮也能实现显示隐藏
  },
  
  hideBu:function(){
    var that = this;
    that.setData({
      // showView: (!that.data.showView)
      showView: (true)
    });
  }
})