【发布时间】：2020-03-17 04:05:03
【问题描述】：
我正在使用 Shopify 和 VUE 创建一个侧边栏菜单来拉入 shopify 链接列表。主要链接正在显示，但子链接被隐藏，并且切换/活动状态没有像预期的那样显示下拉菜单。
这是一个代码笔示例https://codepen.io/benmoswm/pen/RwPydrm
我已经开始这样做了几个小时，但错过了一些明显的东西，但对我来说不是。任何建议都会很棒。谢谢
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<div id="sidebar-panel">
<nav class="sidebar-main-nav-evergreen">
<Burger>Shop</Burger>
</nav>
<Sidebar>
<ul class="evergreen-main-nav">
{% for link in linklists.main-menu-sidebar.links %}
{% include 'desktop-navigation-link' %}
{% endfor %}
</ul>
</Sidebar>
</div>
<template id="sidebar">
<div class="sidebar">
<div class="sidebar-backdrop" v-on:click="closeSidebarPanel" v-if="isPanelOpen"></div>
<transition name="slide">
<div v-if="isPanelOpen"
class="sidebar-panel">
<slot></slot>
</div>
</transition>
</div>
</template>
<template id="burger">
<div id="burger"
:class="{ 'active' : isBurgerActive }"
@click.prevent="toggle">
<slot>
<button type="button" class="burger-button" title="Menu">
<span class="hidden">Toggle menu</span>
<span class="burger-bar burger-bar--1"></span>
<span class="burger-bar burger-bar--2"></span>
<span class="burger-bar burger-bar--3"></span>
</button>
</slot>
</div>
</template>
<style>
.sidebar-panel {
overflow-y: auto;
background-color: #eaeaea;
position: fixed;
left: 0;
top: 0;
height: 100%;
z-index: 999;
padding: 3rem 20px 2rem 20px;
width: 320px;
}
.sidebar-main-nav-evergreen {
float: left;
width: auto;
margin: 0 36px 0 0;
display: block;
position: relative;
font-size: 14px;
padding: 26px 2px 19px;
height: 65px;
line-height: 1.6;
text-transform: uppercase;
}
.slide-enter-active, .slide-leave-active {
transition: transform 0.2s ease;
}
.slide-enter, .slide-leave-to {
transform: translateX(-100%);
transition: all 150ms ease-in 0s
}
.sidebar-backdrop {
background-color: rgba(250, 250, 250, .4);
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
cursor: pointer;
z-index: 10;
}
.evergreen-main-nav {
list-style: none;
margin: 0;
padding: 25px
}
.evergreen-main-nav .evergreen-main-nav-item {
padding: 15px 0;
display: block;
position: relative;
font-weight: 400;
font-size: 15px;
border-bottom: 0px solid #ddd
}
.evergreen-main-nav .evergreen-main-subnav .evergreen-main-nav-item {
font-weight: 300
}
.evergreen-main-nav .evergreen-main-nav-item:last-child {
border-bottom: 0
}
.evergreen-main-nav .evergreen-main-nav-item a {
color: inherit
}
.evergreen-main-subnav {
padding-left: 15px;
margin: 0;
display: none;
}
.evergreen-main-subnav .evergreen-main-nav-item:last-child {
padding-bottom: 0;
}
.evergreen-child-menu {
float: right;
cursor: pointer;
}
.evergreen-child-menu::after {
content: "\f078";
display: inline-block;
font-family: 'FontAwesome';
font-weight: 400;
font-size: 10px;
width: 30px;
text-align: center
}
.evergreen-main-nav-item-has-children .evergreen-main-nav-active .evergreen-child-menu::after {
content: "\f077"
}
.evergreen-main-nav-item-has-children .evergreen-main-nav-active .evergreen-main-subnav {
display: block;
}
/* burger */
.hidden {
visibility: hidden;
}
button {
cursor: pointer;
}
/* remove blue outline */
button:focus {
outline: 0;
}
.burger-button {
position: relative;
height: 30px;
width: 32px;
display: block;
z-index: 999;
border: 0;
border-radius: 0;
background-color: transparent;
pointer-events: all;
transition: transform .6s cubic-bezier(.165, .84, .44, 1);
}
.burger-bar {
background-color: #000;
position: absolute;
top: 50%;
right: 6px;
left: 6px;
height: 2px;
width: auto;
margin-top: -1px;
transition: transform .6s cubic-bezier(.165, .84, .44, 1), opacity .3s cubic-bezier(.165, .84, .44, 1), background-color .6s cubic-bezier(.165, .84, .44, 1);
}
.burger-bar--1 {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
.burger-bar--2 {
transform-origin: 100% 50%;
transform: scaleX(.8);
}
.burger-button:hover .burger-bar--2 {
transform: scaleX(1);
}
.no-touchevents .burger-bar--2:hover {
transform: scaleX(1);
}
.burger-bar--3 {
transform: translateY(6px);
}
#burger.active .burger-button {
transform: rotate(-180deg);
}
#burger.active .burger-bar {
background-color: #fff;
}
#burger.active .burger-bar--1 {
transform: rotate(45deg)
}
#burger.active .burger-bar--2 {
opacity: 0;
}
#burger.active .burger-bar--3 {
transform: rotate(-45deg)
}
</style>
<script>
const store = Vue.observable({
isNavOpen: false
});
const mutations = {
setIsNavOpen(yesno) {
store.isNavOpen = yesno;
},
toggleNav() {
store.isNavOpen = !store.isNavOpen;
}
};
Vue.component('sidebar', {
template: '#sidebar',
methods: {
closeSidebarPanel: mutations.toggleNav
},
computed: {
isPanelOpen() {
return store.isNavOpen
}
}
});
Vue.component('burger', {
template: '#burger',
computed: {
isBurgerActive() {
return store.isNavOpen
}
},
methods: {
toggle() {
mutations.toggleNav()
}
}
});
new Vue({
el: '#sidebar-panel'
})
</script>
【问题讨论】：
标签： javascript html vue.js shopify