使用 bulma 手风琴，在两个手风琴中，如何显示后面的手风琴，点击前一个手风琴内的按钮？

Question

我正在使用 bulma 和 vuejs，我想要三个 bulma 手风琴。即 Accordion1 和 Accordion2、Accordion3。我可以同时制作三个手风琴。但是现在我想首先显示 Accordion1 并在其中有一个 Button，单击它时 accordion1 应该关闭并且 accordion2 应该自动显示，同样对于 accordion2 我想在里面有一个按钮，onClick 关闭 accordion2 并显示 accordion3。我不想隐藏前面的手风琴。这样当用户到达 accordion3 时，所有手风琴都可见。我怎样才能做到这一点？

<BulmaAccordion>
              <BulmaAccordionItem>
                <h1 slot="title">Accordion1</h1>
                <div slot="content">
                  <div class="field">
                   <button></button>
                  </div>
                </div>
              </BulmaAccordionItem>
            </BulmaAccordion>

<BulmaAccordion>
              <BulmaAccordionItem>
                <h1 slot="title">Accordion2</h1>
                <div slot="content">
                  <div class="field">
                   <button></button>
                  </div>
                </div>
              </BulmaAccordionItem>
            </BulmaAccordion>

<BulmaAccordion>
              <BulmaAccordionItem>
                <h1 slot="title">Accordion3</h1>
                <div slot="content">
                  <div class="field">
                   <button></button>
                  </div>
                </div>
              </BulmaAccordionItem>
            </BulmaAccordion>

Answer 1

对于 Bulma + Vue，我建议 Buefy 及其 Collapse with Accordion effect (doc link here)。基本上你只需要使用 v-for 循环进行索引，并根据索引触发每个按钮的点击事件（例如，在点击 Btn1 后打开 2nd，使条件打开到索引 1（从数组中的 0 开始），然后打开 0 和Btn3 的 1 个索引点击）

希望对您有所帮助。

使用 bulma 手风琴，在两个手风琴中，如何显示后面的手风琴，点击前一个手风琴内的按钮？

Using bulma accordions, out of two accordions , how to display the later accordion , on click of a button inside the former accordion?

javascript

accordion

buttonclick

vue.js

bulma