如何同步多个 UIKit 手风琴答案

【问题标题】：how to sync multiple UIKit accordions如何同步多个 UIKit 手风琴
【发布时间】：2019-05-28 21:52:46
【问题描述】：

我在表格行中动态渲染 UIKit 手风琴，每个手风琴只包含一个子 (li) 元素。我怎样才能同步这些手风琴，以便当其中一个打开时，其他的折叠起来？就像选项multiple: false 一样。这是一个 Vue 应用程序（如果您可以提供更具体的答案）。

【问题讨论】：

读取getuikit.com/docs/accordion#javascript 并使用显示项目时触发的事件，因此其他项目将被隐藏。您可以对除当前显示的所有内容使用切换 ..
您能分享一下您如何在每个表格行中放置手风琴的代码吗？我试过这样做，但我的手风琴只进入第一个 td 而不是应用整个 tr

标签： javascript vue.js uikit getuikit

【解决方案1】：

这个答案更好，性能更好

i 是循环的索引。
prevAccordionIndex 在 Vue 实例数据中定义，最初设置为 null。它用于保存上一个（最后一个）打开的手风琴的索引，因此无需像以前的答案一样循环通过$refs 来查找打开的手风琴。

所有手风琴最初都折叠（关闭）。

methods: {
    handleAccordionShow(index) {
        if (this.prevAccordionIndex !== null) {
            this.$uikit.accordion(this.$refs.categoryAccordion[this.prevAccordionIndex]).toggle(0, false)
            this.prevAccordionIndex = index
        } else {
            this.prevAccordionIndex = index
        }
    },
    handleAccordionHide(index) {
        this.prevAccordionIndex = this.prevAccordionIndex === index ? null : index
    }
}

<ul ref="categoryAccordion" @beforeshow="handleAccordionShow(i)" @beforehide="handleAccordionHide(i)" uk-accordion>
  <li>...</li>
</ul>

【讨论】：

【解决方案2】：

这就是我可以解决的方法：

i是循环的索引

toggleAccordion(i) {
  for (let j = 0; j < this.$refs.categoryAccordion.length; j++) {
    if (j === i) {
      continue
    }
    if (this.$refs.categoryAccordion[j].classList.contains('uk-open')) {
      this.uikit.accordion(this.$refs.categoryAccordion[j].parentNode).toggle(0, false)
    }
  }
}

<ul @show="toggleAccordion(i)" uk-accordion>
  <li ref="categoryAccordion">
    ...
  </li>
</ul>

【讨论】：