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

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

由于您有多个彼此不了解的 router-link，父对象将必须拥有“选择哪一个”指示符变量。您的 router-link 的 handleClick 应该 $emit an event that the parent will handle by changing the indicator variable. And the router-link should receive the indicator variable as a prop and use it in a computed 以适当设置 open class。

您的代码可能如下所示：

<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

您可以在 _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 中添加 event-listeners 用于点击这两个 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"  
});

同样，您可以添加更多下拉菜单并为其指定 id 的“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.

CoreUI 一次只有一个下拉菜单

CoreUI only one dropdown at a time

javascript

jquery

css

vue.js

core-ui