使用Razor將垂直導航菜單添加到垂直導航菜單中的問題

我想在我的一個項目中使用剃鬚刀來裝飾垂直導航菜單，我試圖根據沒有成功的功能添加樣式，問題是我在一個表中有子類別和類別，這就是爲什麼我必須調用所有類別，子類別在一個UL中，然後在懸停，活動，非活動等方面對它們進行裝飾。下面是代碼，爲什麼粗體語句不起作用的任何想法。使用Razor將垂直導航菜單添加到垂直導航菜單中的問題

<div class="listbox"> 
     <ul class=""> 
      @foreach (var category in Model) 
      { 
       <li class="@(category.IsActive ? "active" : "inactive")" 
       @if (category.NumberOfParentCategories > 0) 

       { 

        <text>style="background-image: url('/Content/images/cat-ul-li-list.png');border-bottom-style: solid;border-bottom-width:1px; border-bottom-color: #FFFFFF;font-size: 13px; 
text-decoration: none; 
padding-top: 4px; 
padding-left: 15px;color:#5F9E95;min-height:27px;"</text> 

        } 
        **@if (category.NumberOfParentCategories > 0 && category.IsActive == true) 


        { 

        <text>style="background-image: url('/Content/images/cat-ul-li-active.png') !Important;"</text>** 
        }><a href="@Url.RouteUrl("Category", new { categoryId = category.Id, SeName = category.SeName })">@category.Name 

       </a> 
       </li><li class="separator"></li> 
      } 
     </ul> 
    </div>

的CSS：

.block-category-navigation .listbox ul .inactive 
{ 
background-image: url('images/cat-rt-arrow.png'); 
background-repeat: no-repeat; 
background-position: left center; 
border-bottom-width: 1px; 
border-bottom-color: #5F9E95; 
border-bottom-style: solid; 
padding-left:15px; 
min-height:27px; 
padding-top:8px; 
} 

.block-category-navigation .listbox ul li a:hover { color: #404041; } 
.block-category-navigation .listbox ul{ background-image: url('images/cat-ul-active.png') !Important; padding-left:15px;min-height:27px; padding-top: 8px;}

的demonstartion可以在測試網站上看到：Quadratech

任何建議或協助可以理解的，這是否可以使用其他方法如CSS和jQuery做。我附上了我正在查找的圖像，其中止血是下面選擇的類別，是血紅素的子類別，子類別阻力處於活動狀態，下方是其他非活動類別。：

來源

2011-12-06 Mr A

您將兩個style屬性添加到您的標記。

我會將它們合併爲一個。

併爲LI標籤的生成清理了一下。通過首先做了測試，並存儲一些變量的結果：

const string STYLEBASE= "border-bottom-style: solid;border-bottom-width:1px; border-bottom-color: #FFFFFF;font-size: 13px; 
text-decoration: none; 
padding-top: 4px; 
padding-left: 15px;color:#5F9E95;min-height:27px;"; 

     var style = ""; 
     var backgroundimage = ""; 
     if (category.NumberOfParentCategories > 0) { 
      backgroundimage = "background-image: url('/Content/images/cat-ul-li-list.png');"; 
      style = STYLEBASE; 
     } 

     if (category.NumberOfParentCategories > 0 && category.IsActive == true) { 
      // override the background image 
      backgroundimage = "background-image: url('/Content/images/cat-ul-li-active.png'); 
     } 

     <li class="@(category.IsActive ? "active" : "inactive")" style="@Html.Raw(style + " " + backgroundimage)" >

來源

2011-12-06 12:08:47 GvS

我想你的代碼沒有成功，我不能讓像上述 –

@MrA圖像所需要的結果，也許你應該更具體一點。 – GvS

我的意思是，導航菜單不工作，因爲圖像說，當點擊子類別父類別的背景圖像消失 –

使用Razor將垂直導航菜單添加到垂直導航菜單中的問題

回答

相關問題