我在 Vue js 上实现了一个导航栏菜单,它是响应式的,它非常适合桌面,但是当我测试响应式模式时,菜单不起作用,这是按钮切换:
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#sidebarMenu"
aria-controls="sidebarMenu"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
我的侧边栏上有:
<nav id="sidebarMenu" class="collapse d-lg-block sidebar collapse bg-white">
你可以看到参考文献
sidebarMenu
所以,我不知道出了什么问题?我在 CodesandBox.io 上加载我的代码
你可以检查一下并告诉我出了什么问题吗?请
你需要使用 vue 指令而不是 data-toggle 和 data-target ...这是在 vue 中应该如何完成的:
<template>
<div>
<!-- Button to toggle the sidebar -->
<button
class="navbar-toggler"
type="button"
@click="toggleSidebar"
>
<i class="fas fa-bars"></i>
</button>
<!-- Sidebar -->
<nav
id="sidebarMenu"
:class="{ 'collapse': !sidebarOpen, 'd-lg-block': sidebarOpen, 'bg-white': sidebarOpen }"
>
<!-- Sidebar content -->
</nav>
</div>
</template>
<script>
export default {
data() {
return {
sidebarOpen: true, // Initial state, you can set it to false if you want it closed by default
};
},
methods: {
toggleSidebar() {
// Toggle the sidebarOpen state
this.sidebarOpen = !this.sidebarOpen;
},
},
};
</script>