递归式的mustache和复选框来制作下拉菜单

Question

我尝试使用纯CSS制作下拉菜单，我试着使用以下代码中的复选框和标签与mustache模板：

mustache_top_level.html：

<ul class="sf-menu sf-vertical">
{{#links}}
        {{> mustache_mid_level}}
{{/links}}        
</ul>

mustache_mid_level.html:

{{#isShowInMenu}}
<li class="bd-nav-children {{#isDivider}}bd-navDivder-link{{/isDivider}}">
    {{#isVisualLink}}
    <label for="toggle-1"> <a class="bd-navPage-link" title="{{tooltip}}" data-linkType="{{linkType}}">{{title}}</a> </label>
    <input type="checkbox" id="toggle-1">
    {{/isVisualLink}}
    {{^isVisualLink}}
    <a href="{{Url}}" class="bd-navPage-link" title="{{tooltip}}" data-linkType="{{linkType}}" onclick= "return be.Nav.URLHandler(this);">{{title}}</a>
    {{/isVisualLink}}
    {{^children.isEmpty}}
        <ul class="hasan"> 
            {{#children}}              
                {{> mustache_mid_level2}}
            {{/children}}
        </ul>
    {{/children.isEmpty}}   
</li>
{{/isShowInMenu}}

CSS文件：

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

a{ 
  -webkit-appearance: push-button;
  -moz-appearance: button; 
  display: inline-block;
  margin: 60px 0 10px 0;
  cursor: pointer;
  color: #0000ff;
}

input[type=checkbox]:checked ~ .hasan{
    left:   0em; 
    top:    0em;
    position: relative;
    display: block;
}

.hasan{
    display:none;
}
.sf-vertical li:hover ul{
    left:   0em; 
    top:    0em;
    position: relative;
}

.sf-vertical, .sf-vertical li {
    width:  16em;
}

.sf-menu, .sf-menu * {
    margin:         0;
    padding:        0px;
    list-style:     none;
    background-image:url('arrowgreen.png');
    background-position: 190px 30px;
    background-repeat:no-repeat;
}

.sf-menu ul {
    position:       absolute;
    top:            -999em;
    width:          16em;
}

.sf-menu li {
    background:     #E8E8E8 ;
    border-bottom:  3px solid #ffffff;
    position:       relative;
}

.sf-menu a {
    display:        block;
    color:          #797979;
    font-weight:    bold;
    position:       relative;
    padding:        2em 1em;
    text-decoration:none;
}

.sf-menu ul li {
    width:          100%;
}

.sf-menu li li {
    background: #ffffff;
    height: 50px;
    border-bottom: none;
}

.sf-menu ul a{
    background-image: none;
}

.sf-menu li li a {
    padding:        1em 1.4em;
}

li.sf-menu li:hover, li.sf-menu li.sfHover li{
    background:     #ffffff;
}
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active{
    color: #33CCCC;
}

问题在于当我点击任何一个菜单元素时，只有第一个元素的复选框被选中，而不是我点击的那个元素。我认为所有标签都获得了相同的名称，所以检查只会针对第一个元素进行，我该怎么做来解决这个问题？

- user3427721

Answer 1

将复选框的名称更改为您使用mustache的标题名称，它将正常工作：

<label for={{title}} > <a class="bd-navPage-link" title="{{tooltip}}" data-linkType="{{linkType}}">{{title}}</a> </label>
    <input type="checkbox" id={{title}} >

- Hasan Sarraj