javascript - 悬停时以矩形突出显示整个标签区域

Question

请参阅this fiddle .我想为下拉列表突出显示父级的整行。假设在这种情况下 level1 和 level23 应该被突出显示，因为它正在为子元素突出显示。我想用整个宽度突出显示整行。如果它是最后一个 child ，我希望它旁边有子弹。因此，对于 parent ，我想突出显示整行，而对于没有任何其他内容的 child ，旁边应该只有方形元素符号。有人可以帮我解决这两件事吗？由于我是 Web UI 技术的新手，所以我很难完成这项需要花费大量时间的工作。如果有人可以提供帮助，将不胜感激。

<div class="row">
      <div class="col-md-3">
          <div class="well">
              <div>
                  <ul class="nav">
                      <li>
                          <span class="glyphicon glyphicon-plus"></span><label label-default="" class="tree-toggle nav-header">Level1</label>
                          <ul class="nav tree" style="display: none;">
                              <li><a href="">Level21</a>
                              </li>
                              <li><a href="">Level22</a>
                              </li>

                              <li>
                            <span class="glyphicon glyphicon-plus"></span><label label-default="" class="tree-toggle nav-header">Level23</label>
                            <ul class="nav tree" style="display: none;">
                              <li><a href="">Level31</a>
                              </li>
                              <li><a href="">Level32</a>
                              </li>
                            </ul>
                          </li>

                          </ul>
                      </li>
                  </ul>
              </div>
              </div>
          </div>
            </div>

Answer 1

为了获得全宽背景颜色，您似乎需要添加一些额外的 html。基本上我会像这样在 level1 和 level23 周围添加一个 div:

<div class="header-row"><span class="glyphicon glyphicon-plus"></span><label label-default="" class="tree-toggle nav-header">Level1</label></div>

然后您需要添加一些额外的 CSS:

 .nav > li > .header-row:hover,
nav > li > .header-row:active{
 text-decoration: none;
  background-color: #000;   
}

并调整你的开关 JS:

$(this).parent().parent().children('ul.tree').toggle(200);

这是 fiddle :http://jsfiddle.net/wshm6d5n/