Не могу разобраться, как удалить class="open"
у class="options"
. Когда раскрыт select
при клике на другой select
, тот который открыт, закрывался, а на который нажали, открывался. Сейчас они у меня открываются все.
new Vue({
el: "#app",
data: {
isActive: false,
number: '1'
}
})
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
.select {
display: inline-block;
}
.value_num {
background-color: #777;
padding: 5px;
width: 100px;
text-align: center;
cursor: pointer;
}
.options {
background-color: #ccc;
text-align: center;
width: 100px;
padding: 5px;
}
.options li {
padding: 5px 0;
cursor: pointer;
}
.options li:hover {
background-color: #fff;
}
.options.open {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<div class="select" v-on:click="isActive = !isActive">
<div class="value_num">
<span class="number">{{number}}</span>
</div>
<ul class="options" v-if="isActive">
<li class="option" v-for="i in 4">{{ i }}</li>
</ul>
</div>
<div class="select" v-on:click="isActive = !isActive">
<div class="value_num">
<span class="number">{{number}}</span>
</div>
<ul class="options" v-if="isActive">
<li class="option" v-for="i in 4">{{ i }}</li>
</ul>
</div>
<div class="select" v-on:click="isActive = !isActive">
<div class="value_num">
<span class="number">{{number}}</span>
</div>
<ul class="options" v-if="isActive">
<li class="option" v-for="i in 4">{{ i }}</li>
</ul>
</div>
</div>
click-outside
для закрытия по клику снаружи.