html和css和js结合实现折叠菜单的代码

1. 套用模板，将菜单的相关信息直接放在脚本数据中，使用循环生成

2.在js中通过添加类open的方式来实现菜单的折叠和展开

               $(document).on(&＃39;click&＃39;,&＃39;.nav-item:not(.child)&＃39;,function () {
              console.log("choosing");
              var that = $(this);
              var next =that.next();
              if(next.hasClass(&＃39;childgroup&＃39;)){
                  if (that.hasClass(&＃39;open&＃39;))
                  {
                      // 收起当前菜单项
                      that.removeClass(&＃39;open&＃39;);
                      next.slideUp();
                  }
                  else{
                      // 将其他打开的菜单项收起来
                      if($(&＃39;.nav-item:not(.child).open&＃39;).next().hasClass(&＃39;childgroup&＃39;))
                      {
                          $(&＃39;.nav-item:not(.child).open&＃39;).next().slideUp();
                          $(&＃39;.nav-item:not(.child).open&＃39;).removeClass(&＃39;open&＃39;);
                      }
                      // 激活当前菜单项
                      that.addClass(&＃39;open&＃39;);
                      next.slideDown();
                  }
              }
              // 监听一级菜单结束

这里面也有一些css的使用技巧在其中，希望自己能记住