1. 套用模板，將選單的相關資訊直接放在指令碼資料中，使用迴圈生成

<script id="templateNavBar" type="text/html">
    <div class="nav-bar-logo">

    </div>
    {{each $data as item i}}
        <div class="nav-item {{item.class}}">{{item.name}}</div>
        {{if item.child != null}}
            <div class="childgroup">
                {{each item.child as child i}}
                    <div class="nav-item {{child.class}} child">{{child.name}}</div>
                {{/each}}
            </div>
        {{/if}}
    {{/each}}
</script>
 

2.在js中通過新增類open的方式來實現選單的摺疊和展開

               $(document).on('click','.nav-item:not(.child)',function () {
              console.log("choosing");
              var that = $(this);
              var next =that.next();
              if(next.hasClass('childgroup')){
                  if (that.hasClass('open'))
                  {
                      // 收起當前選單項
                      that.removeClass('open');
                      next.slideUp();
                  }
                  else{
                      // 將其他開啟的選單項收起來
                      if($('.nav-item:not(.child).open').next().hasClass('childgroup'))
                      {
                          $('.nav-item:not(.child).open').next().slideUp();
                          $('.nav-item:not(.child).open').removeClass('open');
                      }
                      // 啟用當前選單項
                      that.addClass('open');
                      next.slideDown();
                  }
              }
              // 監聽一級選單結束
 

這裡面也有一些css的使用技巧在其中，希望自己能記住