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

Question

我有一个由网络应用程序生成的菜单结构。输出如下，正如您在下面看到的，菜单分为三层。

<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: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;
}