Question

我有一个带有锚标签的多级菜单。我的问题是让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事件以锚标记为目标。我希望i-Tags在他的父母LI的兄弟姐妹的锚点 - 听起来很神的神 - 切换两个不同的类。

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>

Answer 1

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

('li.open > a > i')

不是

的兄弟姐妹

$(this).closest('li')

李的兄弟是另一个李。

你可以尝试

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

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

jQuery选择器不适用于兄弟姐妹？

1 个答案: