Question

首先，我必须强调HTML是预先生成的，不能改变 - 否则我不会这样做：）

...所以

下面的脚本和HTML会创建一个不错的隐藏/显示菜单，当您单击navheader时，navitem将变为可见。

但是我希望navheader的css类根据navitem是否直接位于其下方而改变。

e.g。

navheader (Change Class to linksbelow)
  navitem
navheader (Change Class to NOlinksbelow)
navheader (Change Class to NOlinksbelow)
navheader (Change Class to linksbelow)
  navitem
etc....

我的HTML和JQUERY：

<script>
    $(function() {
            $('.Nav table .navitem').hide();
                $('.Nav table.navheader').click(function() {
                    $(this).parent().parent().next().find(".navitem").slideToggle('100');
                });
            });
</script>

<div class="Nav">

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <table class="navheader">
                <tr>
                    <td>
                        <a class="navheader" href="#">Header Link 1</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <td>
                        <table class="navitem">
                            <tr>
                                <td>
                                    <a class="navitem" href="#">Link 1</a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table class="navheader">
                <tr>
                    <td>
                        <a class="navheader" href="#">Header link 2</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

</div>

Answer 1

好吧，当只使用CSS选择器时，这个特定情况似乎没有用（因为没有'先前的兄弟选择器'这样的东西），所以它必须更复杂一点：

$('.Nav tr:has(table.navheader)').each(function (i, elmnt) { 
    if($(elmnt).next().find('table.navitem').length > 0) 
        $(elmnt).find('table.navheader').addClass('linksbelow')
});

根据存在更改CSS类

1 个答案: