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

Highlighting the entire label area in rectangular on hover

本文关键字：显示 标签 区域 悬停      更新时间：2023-09-26

请看这个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>

为了获得全宽背景色，您似乎需要添加一些额外的html。基本上，我会在级别1和级别23周围添加一个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/

相关文章：