javascript - CoreUI 一次只有一个下拉菜单

Question

我希望侧边栏下拉菜单一次只能显示一个，因此当我点击另一个下拉菜单时，前一个下拉菜单将再次隐藏。

下面是我当前下拉列表的示例，您可以在其中一次打开多个下拉列表。 https://coreui.io/vue/demo/#/dashboard

<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

制作 radio 组类型 Controller (一次只能选择一项)的通常方法是使用一个变量来指示选择了哪一项。然后每个元素将自己与选定的元素进行比较，以确定它是否应该处于打开状态。

由于您有多个相互不了解的 router-link，因此父对象必须拥有 which-one-is-selected 指示符变量。 router-link 的 handleClick 应该是 $emit an event父级将通过更改指示变量来处理。 router-link 应该接收指示变量作为 prop并在 computed 中使用它适本地设置 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>