所单击元素的切换类queryselectorAll

Question

我想展开一个divonclick问题是它会展开具有相同类的所有其他div

<div class="formations div">
<div class="buttn" @click="expand">
<p>Formations</p><i class="fas fa-chevron-right"></i>
</div>
<div class="link">
<a>link</a>
<a>link</a>
<a>link</a>
</div>
</div>
<div class="Evolution div">
<div class="buttn">
<p>Evolution & Carrieres</p><i class="fas fa-chevron-right"></i>
</div>
<div class="link">
<a>link</a>
<a>link</a>
<a>link</a>
</div>
</div>

js:

expand(){
let links= document.querySelectorAll(".link")
for(let i = 0; i< links.length; i++){
links[i].classList.toggle('show');
}

我尝试了其他解决方案，但无法解决问题

Answer 1

您可以将按钮发送到功能并切换最近的链接。

使用Vue，您可以创建带有按钮和链接数组的数据对象，然后使用方法来切换特定的链接，或者您可以使用refs，不带数据，并将ref name传递给方法:

new Vue({
el: '#app',
data: {
types : [
{ name : 'Formations',
links: [ 'formations link1', 'formations link2', 'formations link3' ]
},
{ name : 'Evolution & Carrieres',
links: [ 'evolution link1', 'evolution link2', 'evolution link3' ]
},
],
toggleLinks: { el: null, state: false }
},
methods: {
expand(el) {
this.toggleLinks.el = el.name;
this.toggleLinks.state = !this.toggleLinks.state;
},
expandRef(el) {
let links = this.$refs[el].closest('.div').querySelectorAll('.link')
links.forEach(l => l.classList.toggle('show'))
}
},
})
/*function expand(el) {
let links = el.closest('.div').querySelectorAll('.link')
links.forEach(l => l.classList.toggle('show'))
}*/

.link {
display: none;
list-style: none;
}
.show {
display: block;
}
ul {
list-style: none;
margin: 0;
}
#app {
display: flex;

}
.refs {
margin-left: 2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<ul >
<h3>With data</h3>
<li v-for="type in types" :key="type.name">
<button class="buttn" @click="expand(type)">
<p>{{ type.name }}</p><i class="fas fa-chevron-right"></i>
</button>
<ul class="link" :class="{ 'show': toggleLinks.state && toggleLinks.el === type.name }">
<li v-for="link in type.links" :key="link">
<a>{{ link }}</a>
</li>
</ul>
</li>
</ul>
<div class="refs">
<h3>With refs</h3>
<div class="formations div">
<button ref="f" class="buttn" @click="expandRef('f')">
<p>Formations</p><i class="fas fa-chevron-right"></i>
</button>
<div class="link">
<a>formations link</a>
<a>formations link</a>
<a>formations link</a>
</div>
</div>
<div class="Evolution div">
<button ref="e" class="buttn" @click="expandRef('e')">
<p>Evolution & Carrieres</p><i class="fas fa-chevron-right"></i>
</button>
<div class="link">
<a>evolution link</a>
<a>evolution link</a>
<a>evolution link</a>
</div>
</div>
</div>

</div>
<!-- <div class="formations div">
<button class="buttn" onclick="expand(this)">
<p>Formations</p><i class="fas fa-chevron-right"></i>
</button>
<div class="link">
<a>formations link</a>
<a>formations link</a>
<a>formations link</a>
</div>
</div>
<div class="Evolution div">
<button class="buttn" onclick="expand(this)">
<p>Evolution & Carrieres</p><i class="fas fa-chevron-right"></i>
</button>
<div class="link">
<a>evolution link</a>
<a>evolution link</a>
<a>evolution link</a>
</div>
</div> -->