Question

构建一个Bootstrap-Vue手风琴，并且一切都按预期工作，但是，我只是添加了expand all /折叠所有按钮，它们也按预期运行，但是现在我的问题是当我直接单击任何一个手风琴面板时，它们全部打开。有没有办法让他们只打开被点击的面板？

html：

   <div class="container container-accordion-one">
      <!--expand all / collapse all row -->
      <div class="row row-expand-collapse">
        <div class="offset-md-1 col-expand-collapse">
          <ul class="list-expand-collapse">
            <li><a href="#/" @click="showCollapse = true" class="font__card-body">Expand All</a></li>
            <li><a href="#/" @click="showCollapse = false" class="font__card-body">Collapse All</a></li>
          </ul>
        </div>
      </div>
      <!--end: expand all / collapse all row -->
      <div class="row">
        <div class="offset-md-1 accordion-style-one">
          <div role="tablist">
            <b-card no-body class="">
              <b-card-header href="#" v-b-toggle.accordion-1 header-tag="header" class="accordion-header" role="tab">
                <p class="font__accordion-header">Accordion 1</p>
                <i class="fal fa-plus accordionClosed" />
                <i class="fal fa-minus accordionOpen" />
              </b-card-header>
              <b-collapse id="accordion-1" v-model="showCollapse" role="tabpanel">
                <b-card-body>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio enim fugit, inventore odio odit perferendis quas quo veritatis voluptate.</p>
                </b-card-body>
              </b-collapse>
            </b-card>

            <b-card no-body class="">
              <b-card-header href="#" v-b-toggle.accordion-2 header-tag="header" class="accordion-header" role="tab">
                <p class=" font__accordion-header">Accordion 2</p>
                <i class="fal fa-plus accordionClosed" />
                <i class="fal fa-minus accordionOpen" />
              </b-card-header>
              <b-collapse id="accordion-2" v-model="showCollapse" role="tabpanel">
                <b-card-body>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio enim fugit, inventore odio odit perferendis quas quo veritatis voluptate.</p>
                </b-card-body>
              </b-collapse>
            </b-card>

            <b-card no-body class="">
              <b-card-header href="#" v-b-toggle.accordion-3 header-tag="header" class="accordion-header" role="tab">
                <p class=" font__accordion-header">Accordion 3</p>
                <i class="fal fa-plus accordionClosed" />
                <i class="fal fa-minus accordionOpen" />
              </b-card-header>
              <b-collapse id="accordion-3" v-model="showCollapse" role="tabpanel">
                <b-card-body>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio enim fugit, inventore odio odit perferendis quas quo veritatis voluptate.</p>
                </b-card-body>
              </b-collapse>
            </b-card>
          </div>
        </div>
      </div>
    </div>

js：

export default {
  name: 'm',
  components: {
   LinksTo
  },
  data() {
    return {
      showCollapse: false
    };
  }
};

Answer 1

您必须为每个标签声明一个单独的 showCollapse 标志。并以shwo / collapse全部打开/关闭它们。

Answer 2

编辑：

使用DRY主体，最好将手风琴内容分解为数据，并且只写一次标记，然后遍历数据。然后，您可以跟踪每个手风琴的打开/关闭状态。

在您的代码中，每个手风琴都基于相同的变量建模，因此它们只能全部打开或全部关闭。您需要为每个手风琴设置一个单独的状态。

示例：（经过简化，因此更易于阅读，但您也可以使用引导程序进行操作）

new Vue({
  el: "#app",
  data: {
    allClosed: true,
    items: [{
        title: 'title 1',
        description: 'description one',
        open: false
      },
      {
        title: 'title 2',
        description: 'description two',
        open: false
      },
      {
        title: 'title 3',
        description: 'description three',
        open: false
      }
    ],
  },
  methods: {
    openCloseAll() {
      this.allClosed = !this.allClosed
      if (this.allClosed) this.items.map(x => x.open = false)
      else this.items.map(x => x.open = true)
    }
  }
})

.accordian {
  margin: 8px 0;
  cursor: pointer;
  background: pink;
  padding: 0.25em;
}

<div id="app">
  <div>
    <button @click="openCloseAll()">
      <template v-if="allClosed">Open</template>
      <template v-else>Close</template>
      All
     </button>
  </div>
  <div v-for="(item, i) in items" class="accordian" @click="item.open = !item.open">
    <span>{{ item.title }}</span>
    <br />
    <span v-if="item.open">{{ item.description }}</span>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

先前的建议：

这是一种实现此类功能的方法：

new Vue({
  el: "#app",
  data: {
    items: ['one', 'two', 'three', 'four', 'five'],
    openItems: [],
    openAll: true
  },
  methods: {
    toggle(i) {
      const index = this.openItems.findIndex(x => x === i)
      if (index !== -1) this.openItems.splice(index, 1)
      else this.openItems.push(i)
    },
    openCloseAll() {
      if (this.openAll) this.items.forEach((x, i) => this.openItems.push(i))
      else this.openItems = []
      this.openAll = !this.openAll
    }
  }
})

.accordian {
  margin: 8px 0;
  cursor: pointer;
  background: pink;
  padding: 0.25em;
}

<div id="app">
  <div>
    <button @click="openCloseAll()">
      <template v-if="openAll">Open</template>
      <template v-else>Close</template>
      All
     </button>
  </div>
  <div v-for="(item, i) in items" class="accordian" @click="toggle(i)">
    {{ item }}
    <span v-if="openItems.includes(i)">opened</span>
    <span v-else>closed</span>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

仅打开一个手风琴面板vue.js / bootstrap vue

2 个答案: