CoreUI только один выпадающий список за раз

Question

Я хочу, чтобы раскрывающийся список на моей боковой панели был доступен только по одному за раз, поэтому при нажатии на другое раскрывающееся меню предыдущий раскрывающийся список снова будет скрыт.

Ниже приведен пример моего текущего раскрывающегося списка, в котором вы можете открывать несколько раскрывающихся списков одновременно. https://coreui.io/vue/demo/

<template>
  <router-link tag="li" class="nav-item nav-dropdown" :to="url" disabled>
    <div class="nav-link nav-dropdown-toggle" @click="handleClick"><i :class="icon"></i> {{name}}</div>
    <ul class="nav-dropdown-items">
      <slot></slot>
    </ul>
  </router-link>
</template>

<script>
  export default {
    props: {
      name: {
        type: String,
        default: ''
      },
      url: {
        type: String,
        default: ''
      },
      icon: {
        type: String,
        default: ''
      }
    },
    methods: {
      handleClick(e) {
        e.preventDefault();
        e.target.parentElement.classList.toggle('open');
      }
    }
  };
</script>

Пожалуйста помоги.

Answer 1

Обычный способ сделать контроллер типа радиогруппы (где только один элемент может быть выбран одновременно) состоит в том, чтобы иметь переменную, которая указывает, какой из них выбран. Затем каждый элемент сравнивает себя с выбранным, чтобы определить, должен ли он быть в открытом состоянии.

Так как у вас есть несколько router-linkЕсли родительский объект не знает друг о друге, он должен иметь переменную индикатора which-one-is-selected. handleClick вашей router-link должен $emit событие, которое родитель будет обрабатывать, изменяя индикаторную переменную. И router-link должен получить переменную индикатора в качестве реквизита и использовать его в вычисляемом для установки open класс по необходимости.

Ваш код может выглядеть так:

<template>
  <router-link tag="li" class="nav-item nav-dropdown" :class="openClass" :to="url" disabled>
    <div class="nav-link nav-dropdown-toggle" @click="handleClick"><i :class="icon"></i> {{name}}</div>
    <ul class="nav-dropdown-items">
      <slot></slot>
    </ul>
  </router-link>
</template>

<script>
  export default {
    props: {
      name: {
        type: String,
        default: '',
        selectedItem: Object
      },
      url: {
        type: String,
        default: ''
      },
      icon: {
        type: String,
        default: ''
      }
    },
    computed: {
      openClass() {
        return this.selectedItem === this ? 'open' : '';
      }
    }
    methods: {
      handleClick(e) {
        e.preventDefault();
        this.$emit('setSelected', this);
      }
    }
  };
</script>

Answer 2

Вы можете добавить свойство itemAttr в _nav.js, например:

items: [
    {
    name: 'Dropdown',
    url: '/dropdown',
    icon: 'icon-grid',
    itemAttr: { id: 'drop-1' },
    children: [{
      name: 'Sub-Item 1',
      url: '/dropdown/subitem1'
    }, {
      name: 'Sub-Item 2',
      url: '/dropdown/subitem2'
    }, {
      name: 'Sub-Item 3',
      url: '/dashboard/subitem3'
    }]
    },
    {
      name: 'Base',
      url: '/base',
      icon: 'icon-base',
      itemAttr: { id: 'item-1' }
    }
]

а в DefaultLayout.js добавьте прослушивателей событий для щелчка по этим двум идентификаторам, например:

var e1 = document.getElementById("drop-1")
e1.addEventListener("click", function () {
  e1.classList.className += " open";
});   
var ev1 = document.getElementById("item-1")
ev1.addEventListener("click", function () {
  e1.className = "nav-item nav-dropdown"  
});

Точно так же вы можете добавить больше раскрывающихся списков и присвоить им идентификаторы "drop-2" и "drop-3". OnClick, если вы хотите открыть этот раскрывающийся список, используйте:

e<i>.classList.className += " open"; 

и для всех остальных раскрывающихся списков, которые вы хотите закрыть:

e<j>.className = "nav-item nav-dropdown";

При нажатии на элемент, который вы хотите закрыть все раскрывающиеся списки, используйте:

e<i>.className = "nav-item nav-dropdown"; //for all the dropdown items.