突出顯示懸停在矩形上的整個標籤區域

請參閱this fiddle。我想突出顯示下拉菜單的整個行。假設在這種情況下level1和level23應該突出顯示，因爲它正在突出顯示子項目。我想用整個寬度突出整行。如果它是最後一個孩子，我想在它旁邊有一個子彈。所以，對於父母來說，我想強調整個行，對於沒有任何進一步行爲的孩子，應該在旁邊有方形的子彈。有人能幫我解決這兩件事嗎？由於我對網絡用戶界面技術很陌生，因此我很難完成這項花費很多時間的工作。如果有人可以請幫助，將不勝感激。突出顯示懸停在矩形上的整個標籤區域

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

來源

2015-04-03 rick

爲了獲得全寬的背景色，它看起來像你需要添加一些額外的HTML。基本上，我想補充一個div周圍1級和level23像這樣：

<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/

來源

2015-04-03 17:56:43 tnschmidt

感謝您的答案，如何突出顯示相同的高度，因爲它具有較低的高度t與兒童項目相比，應該在您添加的CSS中進行硬編碼嗎？還有一件事是我們可以在沒有其他孩子的兒童項目旁邊找到子彈嗎？ – rick 2015-04-03 18:05:08

是的，只是添加CSS填充到div我補充說：.header行{ padding：5px 0px; } – tnschmidt 2015-04-03 18:07:35

就你的情況而言，我只是在Level21標記內爲你選擇的一小段子彈添加一個HTML圖像，或者你可以爲子彈添加一個背景圖像到Level21，這將需要你爲每個LI添加一個類沒有更多的孩子。您可以將列表樣式添加到具有類的列表項中，但它們會超出您突出顯示的背景並且看起來不太好。 – tnschmidt 2015-04-03 18:21:50

突出顯示懸停在矩形上的整個標籤區域

回答

相關問題