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，因此父对象将必须拥有“被选中的那个”指示符变量。您的handleClick中的router-link应该$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>

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中，添加事件监听器以单击这两个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一次仅一个下拉列表

2 个答案: