vue.js 手风琴菜单

<template>
  <div class="accordion">
    <div v-for="(item, index) in items" :key="index" class="accordion-item">
      <button @click="toggleItem(index)" class="accordion-header">
        {{ item.title }}
      </button>
      <div v-show="item.isOpen" class="accordion-content">
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { title: 'Section 1', content: 'Content for section 1', isOpen: false },
        { title: 'Section 2', content: 'Content for section 2', isOpen: false },
        // 更多项...
      ]
    };
  },
  methods: {
    toggleItem(index) {
      this.items[index].isOpen = !this.items[index].isOpen;
    }
  }
};
</script>

<style>
.accordion-header {
  cursor: pointer;
}
.accordion-content {
  padding: 10px;
  border: 1px solid #ccc;
}
</style>

toggleItem(index) {
  this.items.forEach((item, i) => {
    item.isOpen = i === index;
  });
}