Javascript CoreUI一次只显示一个下拉列表

我希望我的侧边栏下拉列表一次只能使用一个，因此当我单击另一个下拉列表时，上一个下拉列表将再次隐藏

下面是我当前下拉列表的示例，您可以在其中一次打开多个下拉列表

{{name}}


导出默认值{
道具：{
姓名：{
类型：字符串，
默认值：“”
},
网址：{
类型：字符串，
默认值：“”
},
图标：{
类型：字符串，
默认值：“”
}
},
方法：{
handleClick（e）{
e、 预防默认值（）；
e、 target.parentElement.classList.toggle（'open'）；
}
}
};

---

请提供帮助。

制作无线组类型控制器（一次只能选择一个项目）的常用方法是使用一个变量来指示选择了哪个项目。然后，每个元素将自身与所选元素进行比较，以确定其是否应处于打开状态

由于您有多个彼此不了解的

路由器链接

，因此父对象将必须拥有which one is selected指示符变量。您的

路由器链接的
handleClick
应该是父级将通过更改指示符变量来处理的。而
路由器链接
应将指示符变量作为a接收，并在a中使用它来设置适当的
打开
类

您的代码可能如下所示：

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


{{name}}


导出默认值{
道具：{
姓名：{
类型：字符串，
默认值：“”，
selectedItem:Object
},
网址：{
类型：字符串，
默认值：“”
},
图标：{
类型：字符串，
默认值：“”
}
},
计算：{
openClass（）{
返回此。selectedItem==此“打开”：“”；
}
}
方法：{
handleClick（e）{
e、 预防默认值（）；
此.$emit（'setSelected'，this）；
}
}
};
您可以在_nav.js中添加“itemAttr”属性，如：

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中，为单击这两个id添加事件侦听器，如：

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”。单击，如果要打开该下拉列表，请使用：

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

e.classList.className+=“打开”；

对于要关闭的所有其他下拉列表，请使用：

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

e.className=“导航项目导航下拉列表”；

单击要关闭所有下拉列表的项目时，请使用：

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

e.className=“导航项目导航下拉列表”//对于所有下拉项。

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