子菜單中的HTML/CSS條件樣式

Question

我有一個由web應用程序生成的菜單結構。輸出如下，正如你在下面看到的菜單深入三層。

<ul id="mainMenu" class="nav"> 
    <li> 
     <a class="firstitem " href="/products.aspx">Products</a> 
     <ul id="firstLevel"> 
      <li> 
       <a class="firstitem " href="/products/category-1.aspx">Category 1</a> 
       <ul id="secondLevel"> 
        <li> 
         <a class="firstitem " href="/products/category-1/sub-category-1.aspx">Subcategory 1</a> <!--If ul#thirdlevel exists, I want this text to be bold.--> 
         <ul id="thirdLevel"> 
          <li> 
           <a class="firstitem " href="/products/category-1/sub-category-1/myProduct.aspx">My Product</a> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     <ul> 
    </li> 
</ul> 

大多數菜單將按上述方式生成，但下面的一個菜單（沒有第三級）也是一個選項。

<ul id="mainMenu" class="nav"> 
    <li> 
     <a class="firstitem " href="/products.aspx">Products</a> 
     <ul id="firstLevel"> 
      <li> 
       <a class="firstitem " href="/products/category-1.aspx">Category 1</a> 
       <ul id="secondLevel"> 
        <li> 
         <a class="firstitem " href="/products/category-1/sub-category-1.aspx">Subcategory 1</a> 
        </li> 
       </ul> 
      </li> 
     <ul> 
    </li> 
</ul> 

我想達到的目標是，如果有是第三級菜單我想超鏈接的第二級別的文本要大膽。我怎樣才能做到這一點？最好用CSS，否則用javascript/jQuery。

Answer 1

我做了的jsfiddle你：如果你使用jQuery，你可以沿着線做http://jsfiddle.net/danAR/

jQuery代碼：

$(function() { 
    $('ul#secondLevel li').each(function(index, item) { 
     $(this).find('a').toggleClass('aBold', ($(this).find('ul#thirdLevel').length > 0)); 
    }); 
}); 

CSS：

a.aBold { 
    font-weight:bold; 
} 

Answer 2

我不能在CSS中看到任何簡單的方法，因爲您的樣式基於條件。

var $third = $('#thirdLevel'); 
    if ($third.length) 
    { 
     $third.closest('a').css('font-weight', 'bold'); 
    }