- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我希望侧边栏下拉菜单一次只能显示一个,因此当我点击另一个下拉菜单时,前一个下拉菜单将再次隐藏。
下面是我当前下拉列表的示例,您可以在其中一次打开多个下拉列表。 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>
请帮忙。
最佳答案
制作 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>
关于javascript - CoreUI 一次只有一个下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51162229/
我希望侧边栏下拉菜单一次只能显示一个,因此当我点击另一个下拉菜单时,前一个下拉菜单将再次隐藏。 下面是我当前下拉列表的示例,您可以在其中一次打开多个下拉列表。 https://coreui.io/vu
我正在使用管理模板 CoreUI。我的布局是页面 https://coreui.io/v1/docs/layout/options/ 中描述的基本布局 我正在尝试让右侧的侧边菜单打开 float 主要
所以,我刚刚修复了我的应用程序,以便在成功登录后,应该显示主页。然而,在此之后,我的其余路线似乎神奇地消失了。相关代码如下: 默认布局.js class DefaultLayout extends C
我正在探索 coreUI。 我正在尝试创建在 github 上找到的这个 login.html: https://github.com/mrholek/CoreUI-Free-Bootstrap-Ad
所以有这个 gem https://github.com/pelted/coreui-rails ,它使用 CoreUI,它是一个 Bootstrap 管理模板。 现在该模板覆盖了 Bootstrap
我想在 DevExtreme 数据网格内使用 CSwitch。使用 DxSwitch,一切都按预期工作,但我无法使其与 CSwitch 一起工作。我想我使用了错误的绑定(bind),不是吗?
使用组件AppSidebarNav,是否可以每次只折叠一次?我在文档中找不到任何相关内容,有人已经解决了这个问题吗? 我的问题是:我有很多带有“children”(可以折叠)的按钮,如果用户点击严重的
我正在使用 @coreui/react与 React-select问题是返回 Select scoped slots 中的元素休息 core-ui 等功能搜索 & 排序 但是,如果在返回 时效果很好
我想在我的 Flask 网络应用程序中使用 CoreUI 管理模板 ( http://coreui.io/ ),但我不确定如何使用它。 我查看了它的文档,它说要安装 NodeJS 和我不知道的东西,无
我刚开始学习 react js 并使用 coreui 免费模板。但我不知道为什么 coreui 图标没有显示。如果我的代码错误,请纠正我。 这是我首先构建我的 react js 应用程序的步骤。 我已
第一次,我使用免费 coreUi React.js 管理模板 . 我正在尝试更改页眉和侧边栏 Logo ,但我无法理解如何更改它。 文件路径:src\containers\TheSidebar.js
在使用 Firebase Crashlytics 检查崩溃时,我注意到 Keys 部分中有以下行: CoreUI: deallocating _CUIInternalLinkRendition 711
我尝试更改 CoreUI 边栏宽度。但是在coreui文档中并没有具体说明如何修改。 我尝试手动将 css 样式添加到 Vuejs 组件,但没有成功。 //这里是coreui proejct的代码 从
我正在尝试用 Font Awesome 图标替换管理面板模板侧边栏中的默认 CoreUI 图标。 我已经使用 latest official installation instructions 成功安
我正在尝试在iOS 13 Beta上测试应用程序。当我在欢迎屏幕上点击一个按钮以切换到另一个屏幕时,该应用程序卡住,然后终止。当我在Xcode 11中进行调试时,在控制台中看到以下警告行: [fram
自从升级到 Xcode 7 以来,我们的 CI 系统中不断收到成千上万的此类日志。根本不知道它们可能意味着什么。 2015-09-16 13:44:36.286 Interface Builder C
我是一名优秀的程序员,十分优秀!