如何同步多个UIKit手风琴

Question

我在表行中动态地呈现UIKit手风琴，每个行只包含一个子元素(li)。我如何同步这些手风琴，以便当其中一个打开，其他的崩溃？就像选项multiple: false一样。这是一个Vue应用程序(如果你能提供一个更具体的答案)。

Answer 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>

​

Answer 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>

​