Question

我有一个由webapplication生成的菜单结构。输出如下，正如您在下面看到的那样，菜单深入三层。

<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

我无法在CSS中看到任何简单的方法，因为您的样式基于条件。如果您使用jQuery，您可以按照以下方式执行：

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

Answer 2

我为你做了一个jsFiddle：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;
}

子菜单中的html / css条件样式

2 个答案: