как синхронизировать несколько аккордеонов 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>