0

我有一个带有锚标签的多级菜单。我的问题是让 jQuery 选择器正常工作。

工作代码：

$(this)
    .closest('li')
    .siblings('li.open')
    .children('a')
    .children('i')
    .toggleClass('class1')
    .toggleClass('class2');

它应该是什么：

$(this)
    .closest('li')
    .siblings('li.open > a > i')
    .toggleClass('class1')
    .toggleClass('class2');

但即使这样也行不通：

$(this)
    .closest('li')
    .siblings('li.open a i')
    .toggleClass('class1')
    .toggleClass('class2');

我想以文本形式执行的操作：onClick 事件以锚标记为目标。我希望他的父母 LI 的兄弟姐妹的锚点中的 i-Tags - 听起来很棒的上帝 - 切换两个不同的类。

HTML

<ul>
    <li>
        <a><i class="class1"></i>Label</a>
        <ul>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
        </ul>
    </li>
    <li class="open">
        <a><i class="class1"></i>Label</a>
        <ul>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
        </ul>
    </li>
    <li>
        <a><i class="class1"></i>Label</a>
    </li>
    <li>
        <a><i class="class1"></i>Label</a>
    </li>
    <li>
        <a><i class="class1"></i>Label</a>
    </li>
    <li>
        <a><i class="class1"></i>Label</a>
    </li>
    <li>
        <a><i class="class1"></i>Label</a>
    </li>
</ul>
4

1 回答 1

2

我认为它不起作用的原因是因为

('li.open > a > i')

不是兄弟姐妹

$(this).closest('li')

li 的兄弟是另一个 li。

你可以试试

$(this).closest('li').sibling('li.open').find('a > i').toggleClass('blah');

为什么你不能使用你发布的第一段代码？

于 2012-09-11T06:56:38.767 回答