JQuery - 目标跟随元素

时间:2011-11-22 04:48:05

标签: jquery jquery-selectors html-lists

我正在为我开发的ActionScript 3框架创建一些文档。为了保持一致,感觉将尽可能贴近Adobe liveocs。

左边有一个面板,我希望有一个按包分类的类树。到目前为止,HTML看起来像这样:

<ul id="directory">
    <li class="package">zephyr</li>
    <ul>
        <li><a href="/docs/zephyr/class/foundation.php">zephyr.<strong>Foundation</strong></a></li>

        <li class="package">zephyr.core</li>
        <ul>
            <li><a href="/docs/zephyr/class/core.php">zephyr.core.<strong>Core</strong></a></li>
            <li><a href="/docs/zephyr/class/heart.php">zephyr.core.<strong>Heart</strong></a></li>
            <li><a href="/docs/zephyr/class/manager.php">zephyr.core.<strong>Manager</strong></a></li>
            <li><a href="/docs/zephyr/class/signature.php">zephyr.core.<strong>Signature</strong></a></li>
        </ul>

        <li class="package">zephyr.entity</li>
        <ul>
            <li><a href="/docs/zephyr/class/entity.php">zephyr.entity.<strong>Entity</strong></a></li>
        </ul>
    </ul>
</ul>

您会注意到每个包都有类package,并且后面紧跟着:

<ul>...</ul>

我想在此JQuery片段中的每个<ul>之后立即选择此li.package元素:

$("li.package").click(function()
{
    var ul = ??; // <---- get relevant ul here

    ul.slideToggle(300);
});

我怎样才能做到这一点?

1 个答案:

答案 0 :(得分:2)

使用

$(this).next('ul');

这意味着找到点击的ul元素旁边的li元素。

有关示例,请参阅此fiddle