vue点击其它侧边栏收缩_Vue通过控制样式实现顶部导航点击切换、侧边栏点击切换、手风琴折叠面板等功能...

我使用的是uni-app框架语法格式，普通的html同理。

1、侧边栏：

• v-for="(item,key) in list_text"

  :key=key

  :class="key==activeitemindex?'activeitem':''"

  @click="clickitem(key,item)"

  >{{item}}

export default {

props:['list_text'],

data() {

return {

activeitemindex:0

};

},

methods:{

clickitem(key,item){

this.activeitemindex = key;

this.$emit('clickitem',key,item)

}

}

}

.content{

width:180upx;

}

ul{

width:180upx;

li{

width:180upx;

height:100upx;

background:#fff;

font-size:30upx;

color:#666;

line-height:100upx;

text-align: center;

box-sizing:border-box;

}

.activeitem{

background:#fafafa;

color:#E62129;

border-top:1px solid #f2f2f2;

border-bottom:1px solid #f2f2f2;

border-left:4px solid #E62129;

}

}

ul:after{

content: ' ';

display: block;

clear: both;

}

上述例子是一个子组件，可以直接引入到页面的

“@click="clickitem(key,item)"方法会把当前点击项的索引值取出来，然后在html中通过判断:class="key==activeitemindex?'activeitem':' '"当前索引值是否等于点击的索引值来动态设置class类名，在css'中设置好active的样式即可。

2、手风琴折叠面板

html部分：



{{item.question}}



{{item.answer}}

js部分：

methods:{

clickitem(index){

this.activeitemindex = index;

}

}

css部分可以根据不同的样式效果来设置多种样式。