3

我尝试使用纯 css 制作下拉菜单，我尝试使用以下代码使用带有小胡子模板的复选框和标签：

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

问题是当我单击任何菜单元素时，检查仅针对第一个元素复选框，而不是针对我单击的元素。就像我想的那样，所有标签都有相同的名称，所以检查只针对第一个元素，我必须做些什么来解决问题？

4

1 回答 1

1

用你与 mustache 一起使用的标题名称更改复选框的名称，它会正常工作：

<label for={{title}} > <a class="bd-navPage-link" title="{{tooltip}}" data-linkType="{{linkType}}">{{title}}</a> </label>
    <input type="checkbox" id={{title}} >
于 2014-03-17T13:05:19.033 回答