Vue 手风琴在点击时展开所有手风琴

Question

我正在尝试使用 Vue3 组合创建我自己的手风琴组件。我遇到一个问题，当我单击一个手风琴时，它会打开、展开并显示该手风琴内容，但它也会展开页面上的所有其他手风琴。其他手风琴没有显示其内容，这是有道理的，因为每个手风琴都有一个

v-if=isOpen

但我不明白为什么所有其他手风琴的高度都被修改。

我不确定是应用了 CSS 来扩展它们还是与 vue 相关的东西正在这样做

<template>
  <div class="accordion">
    <div class="accordion-header" @click="toggle">
      <h3>{{ title }}</h3>
      <span :class="['chevron', { rotated: isOpen }]">
        <img :src="chevronIcon" />
      </span>
    </div>
    <div v-if="isOpen" class="accordion-body">
      <p>{{ content }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import chevronIcon from '/images/chevron.svg'

interface Props {
  title: string
  content: string
  isOpen: boolean
  accordionId: string | null
}

const props = defineProps<Props>()

const emit = defineEmits<{
  accordionClick: [accordionId: string]
}>()

const toggle = () => {
  emit('accordionClick', props.accordionId!)
}
</script>

<style scoped>
.accordion {
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  margin-bottom: 1rem;
  width: 100%;
  max-width: 320px;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  cursor: pointer;
  h3 {
    font-size: 1.1rem;
    font-weight: none;
  }
}

.chevron {
  display: inline-flex;
  transition: transform 0.3s ease;
  height: 30px;
}

.rotated {
  transform: rotate(180deg);
}

.accordion-body {
  padding: 1rem;
  background-color: #ffffff;
  border-top: 1px solid #e0e0e0;
  color: #333;
  font-size: 1rem;
  overflow: hidden;
  transition:
    max-height 0.3s ease,
    opacity 0.3s ease;
  max-height: 500px;
}
</style>

Answer 1

只需对

isOpen

使用 v-model，这将使

isOpen

对于每个手风琴来说都是单独的：

游乐场

const isOpen = defineModel<boolean>('isOpen');