小编dan*_*zin的帖子

我需要创建一个带把手的菜单,菜单中的一些选项有自己的子选项,我正在努力解决这个问题已经持续了1个小时.

我的模板的JSON对象是

var menuJSON = [
{  
   name : "Schedule", 
   url: "index.html?lang=en", 
   icon: "fa fa-calendar-o",       
   state:"inactive"
},
{ 
  name : "Clients",  
  url: '#', 
  icon: "fa fa-users", 
  subs : ['Yours', 'Company'], 
  state:"inactive", subsTargetID: "collapse-menuC"
}
];

到目前为止我的模板看起来像这样:

<div class="sidebarMenuWrapper" id="menuOpts">
    <script id="optsMenuTemp" type="x-handlebars-template">
        <ul class="list-unstyled">
        {{#each this}}
                <li class="{{state}}">
                    <a href="{{url}}"><i class="{{icon}}"></i>
                        <span>{{name}}</span>
                    </a>
                </li>
        {{/each}}
        </ul>
    </script>
</div>

这是子菜单选项的html:

<li class="hasSubmenu">
    <a href="#"  data-toggle="collapse" data-target="#collapse-menuD"><i class="fa fa-folder-open-o"></i>
        <span>{{documents.name}}</span>
    </a>
    <ul class="collapse" id="collapse-menuD">
        <li>
          <a href="index.html?lang=en&amp;top_style=inverse">
            <i class= "fa fa-street-view"></i>
            <span>{{documents.sub1}}</span> …