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-Tag (恐ろしく聞こえる神) に、2 つの異なるクラスを切り替えることを望んでいます。

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')

李の兄弟は別の李です。

あなたは試すことができます

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

最初に投稿したコードを使用できないのはなぜですか?

于 2012-09-11T06:56:38.767 に答える