vue中遇到的一个点击展开或收起并且改变背景颜色的问题。
<template>
<div class="expense-center">
<div class="fl expense-left">
<p class="left-titles">费用中心</p>
<ul class="order-con">
<router-link to="/control-home/expense-center/my-order "><li @click="orderOne(0)" :class="clickColor==0?'click-color':'default-color'">我的订单</li></router-link>
<router-link to="/control-home/expense-center/renew-manage"><li class="default-color" @click="orderOne(1)" :class="clickColor==1?'click-color':'default-color'">续费管理</li></router-link>
<li class="order-par default-color">
<div @click="orderOne(2)" :class="clickColor==2?'click-color':'default-color'">发票管理<i class="order-close" :class="orderChildOne?'orderOpen':'order-close'"></i></div>
<ul class="order-child" v-show="orderChildOne" >
<li>发票索取</li>
<li>发票列表</li>
<li>发票信息管理</li>
<li>发票寄送地址管理</li>
</ul>
</li>
<li class="order-par default-color">
<div @click="orderTwo(3)" :class="clickColor==3?'click-color':'default-color'">合同管理<i class="order-close" :class="orderChildTwo?'orderOpen':'order-close'"></i></div>
<ul class="order-child" v-show="orderChildTwo">
<li>合同申请</li>
<li>合同管理</li>
</ul>
</li>
</ul>
</div>
<div class="fl expense-right">
<transition name="move" mode="out-in">
<router-view></router-view>
</transition>
</div>
</div>
</template>
<script>
export default {
data() {
return {
orderChildOne:false,//点击子列表显示隐藏
orderChildTwo:false,
clickColor:0,//点击对应的颜色
}
},
methods: {
orderOne:function(index){//点击显示子列表或隐藏子列表
if(index==1){//点击下标为2的时候下标为3也展开，实际效果是不展开的，加上判断就不会出现这种情况了
this.clickColor=index;
}else{
this.orderChildOne=!this.orderChildOne;
this.clickColor=index;
}
},
orderTwo:function(index){
this.orderChildTwo=!this.orderChildTwo;
this.clickColor=index;
}
}
};
</script>
<style >
@mixin padding{
padding-bottom:2000px;
margin-bottom:-2000px;
}
@mixin boxsizing{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
@mixin position{
position:absolute;
left: 148px;
top:15px;
}
.expense-center{
background:#f1f1f1;
}
.left-titles{
height:70px;
line-height:70px;
text-align:center;
font-size:18px;
color:#171f2a;
}
.expense-left{
width:180px;
background: #f1f1f1;
@include padding;
overflow:hidden;
}
.expense-right{
width:85%;
margin-top: 20px;
padding: 0 18px 60px 18px;
@include boxsizing;
overflow: hidden;
@include padding;
}
.order-con{
text-align:center;
line-height:40px;
font-size:14px;
color:#171f2a;
}
.default-color{
color:#171f2a;
background: #f1f1f1;
}
.click-color{
color:#42aeec;
background:#fff;
}
.order-par{
position:relative;
}
.order-child{
display:block;
font-size:12px;
line-height:40px;
text-align:left;
margin-left:80px;
color:#666;
}
.order-close{
display:inline-block;
width:6px;
height:10px;
background:url(../../../assets/images/fy-xfclose.gif) no-repeat;
background-size:100% 100%;
@include position;
}
/*修改样式*/
.orderOpen{
display:inline-block;
width:10px;
height:6px;
background:url(../../../assets/images/fx-xfopen.gif) no-repeat;
background-size:100% 100%;
@include position;
}
</style>