Question

请参阅this fiddle。我想突出显示父级的整行以便下拉列表。假设在这种情况下，level1和level23应该突出显示，因为它会突出显示子项。我想用整个宽度突出显示整行。如果它是最后一个孩子，我希望旁边有子弹。因此，对于父母我想突出显示整行，对于没有任何进一步的孩子，应该只有方形子弹旁边。有人可以帮我解决这两件事吗？由于我是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);

继承人：http://jsfiddle.net/wshm6d5n/

在悬停时突出显示矩形的整个标签区域

1 个答案: