Javascript 显示菜单选项的子元素有问题

我正在使用Shopify&VUE创建一个边栏菜单，拉入Shopify链接列表。主链接将显示，但子链接将隐藏，并且切换/活动状态不会像预期的那样影响下拉列表

下面是一个代码笔示例

我已经开始在这几个小时，但错过了一些明显的，但不是对我来说。任何建议都很好。谢谢

<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>

商店

{%用于链接列表中的链接。main-menu-sidebar.links%}
{%include'桌面导航链接'%}
{%endfor%}

切换菜单
.侧边栏面板{
溢出y：自动；
背景色：#eaeaea；
位置：固定；
左：0；
排名：0；
身高：100%；
z指数：999；
填充：3rem 20px 2rem 20px；
宽度：320px；
}
.侧边栏主导航常青树{
浮动：左；
宽度：自动；
利润率：0 36px 0；
显示：块；
位置：相对位置；
字体大小：14px；
填充：26px 2px 19px；
高度：65px；
线高：1.6；
文本转换：大写；
}
.幻灯片进入活动状态，.幻灯片离开活动状态{
转换：转换0.2秒；
}
.滑入，.滑出至{
转化：translateX（-100%）；
过渡：所有150毫秒都在0秒内轻松过渡
}
.侧边栏背景{
背景色：rgba（250250250.4）；
宽度：100vw；
高度：100vh；
位置：固定；
排名：0；
左：0；
光标：指针；
z指数：10；
}
.长荣主导航{
列表样式：无；
保证金：0；
填充：25px
}
.长荣主导航长荣主导航项目{
填充：15px0；
显示：块；
位置：相对位置；
字体大小：400；
字体大小：15px；
边框底部：0px实心#ddd
}
.长荣主导航长荣主导航次导航长荣主导航项目{
字号：300
}
.长荣主导航长荣主导航项目：最后一个孩子{
边框底部：0
}
.长荣主导航长荣主导航项目a{
颜色：继承
}
.长荣大道{
左侧填充：15px；
保证金：0；
显示：无；
}
.evergreen主导航子导航。evergreen主导航项目：最后一个孩子{
填充底部：0；
}
.常青儿童菜单{
浮动：对；
光标：指针；
}
.evergreen子菜单：：之后{
内容：“\f078”；
显示：内联块；
字体系列：“FontAwesome”；
字体大小：400；
字体大小：10px；
宽度：30px；
文本对齐：居中
}
.evergreen主导航项具有子项。evergreen主导航处于活动状态。evergreen子菜单：：after{
内容：“\f077”
}
.evergreen主导航项有子项。evergreen主导航激活。evergreen主导航子导航{
显示：块；
}
/*汉堡*/
.隐藏{
可见性：隐藏；
}
钮扣{
光标：指针；
}
/*删除蓝色轮廓*/
按钮：焦点{
大纲：0；
}
.汉堡纽扣{
位置：相对位置；
高度：30px；
宽度：32px；
显示：块；
z指数：999；
边界：0；
边界半径：0；
背景色：透明；
指针事件：全部；
变换：变换.6s三次贝塞尔（.165、.84、.44、1）；
}
.汉堡吧{
背景色：#000；
位置：绝对位置；
最高：50%；
右：6px；
左：6px；
高度：2倍；
宽度：自动；
页边顶部：-1px；
变换：变换.6s立方贝塞尔（.165，.84，.44，1），不透明度.3s立方贝塞尔（.165，.84，.44，1），背景色.6s立方贝塞尔（.165，.84，.44，1）；
}
.汉堡吧--1{
-webkit转换：translateY（-6px）；
transform:translateY（-6px）；
}
.汉堡吧--2{
变换原点：100%50%；
变换：scaleX（.8）；
}
.汉堡按钮：悬停.汉堡吧--2{
变换：scaleX（1）；
}
.没有触摸事件.汉堡吧--2:悬停{
变换：scaleX（1）；
}
.汉堡吧--3{
变换：translateY（6px）；
}
#汉堡。激活。汉堡按钮{
变换：旋转（-180度）；
}
#汉堡，活跃，汉堡吧{
背景色：#fff；
}
#汉堡，活跃，汉堡吧，1{
变换：旋转（45度）
}
#汉堡，活跃，汉堡吧，2{
不透明度：0；
}
#汉堡，活跃的，汉堡吧，3{
变换：旋转（-45度）
}
常数存储=Vue.observable({
isNavOpen:false
});
常数突变={
setIsNavOpen（是否）{
store.isNavOpen=yesno；
},
toggleNav（）{
store.isNavOpen=！store.isNavOpen；
}
};
Vue.component（'侧栏'{
模板：“#侧边栏”，
方法：{
closeSidebarPanel:translations.toggleNav
},
计算：{
isPanelOpen（）{
return store.isNavOpen
}
}
});
Vue.组件（“汉堡”{
模板：“#汉堡”，
计算：{
是主动的（）{
return store.isNavOpen
}
},
方法：{
切换（）{
突变。toggleNav（）
}
}
});
新Vue({
el:“#侧边栏面板”
})

。必须在子菜单项上将位置设为绝对位置

更新

const store=Vue.observable({
isNavOpen:false
});
常数突变={
setIsNavOpen（是否）{
store.isNavOpen=yesno；
},
toggleNav（）{
store.isNavOpen=！store.isNavOpen；
}
};
Vue.component（'侧栏'{
模板：“#侧边栏”，
方法：{
closeSidebarPanel:translations.toggleNav
},
计算：{
isPanelOpen（）{
return store.isNavOpen
}
}
});
Vue.组件（“汉堡”{
模板：“#汉堡”，
计算：{
是主动的（）{
return store.isNavOpen
}
},
方法：{
切换（）{
突变。toggleNav（）
}
}
});
新Vue({
el:“#侧边栏面板”
})

/*常用样式*/
html{
身高：100%；
溢出：隐藏；
}
身体{
边界：0；
保证金：0；
填充：0；
字体系列：“Lato”；
身高：100%；
背景色：#D4；
}
.侧边栏面板{
溢出y：自动；
背景色：#eaeaea；
位置：固定；
左边
.evergreen-main-subnav {
   padding:0;
   margin:0;
   display: none;
   position:absolute;
   top:10%;
   left:33%;
   background-color:#ccc;
}
.mobile-nav__item{
   list-style:none;
  width:100%;
  text-align:left;
  padding:8px;
}
.mobile-nav__item a{
  text-decoration:none;
}

.mobile-nav__item a:hover{
 font-weight:900;
 text-decoration:underline;
}

.evergreen-main-nav-item:hover .evergreen-main-subnav{
 display:block;
}