隐藏.children很容易--如果是属于<dt>的<dd>呢

Question

此代码提供了一个简单的翻转/卷展栏显示|隐藏功能：

$(document).ready(function () {
    $("div[class='lineItem']").hover(function () {

        $(this).children(".hiddenDesc").css("visibility", "visible");
    },
function () {
    $(this).children(".hiddenDesc").css("visibility", "hidden");
});
});

我如何为类似的结构提供类似的功能：

    <dl>
        <dt>
            High-level stuff 1
        </dt>
        <dd class="hiddenDesc">
            Extended explanatory stuff that goes on seemingly forever 1
        </dd>
        <dt>
            High-level stuff 2
        </dt>
        <dd class="hiddenDesc">
            Extended explanatory stuff that goes on seemingly forever 2
        </dd>
        <dt>
            High-level stuff 3
        </dt>
        <dd class="hiddenDesc">
            Extended explanatory stuff that goes on seemingly forever 3
        </dd>
    </dl>

Answer 1

使用.next()代替.children()，如下所示：

$(document).ready(function () {
  $("dt").hover(function () {
    $(this).next().css("visibility", "visible");
  }, function () {
    $(this).next().css("visibility", "hidden");
  });
});

You can test it out here，有关DOM导航、从一个元素移动到另一个元素的相关问题，请务必查看tree-traversal section of the jQuery API。

Answer 2

不幸的是，这看起来有点复杂--多个dt元素可以与多个dd元素组合使用，因此您必须将nextAll与adjacent sibling selector (+)结合使用：

$('dt').hover(function(){
    $(this).nextUntil('dt').toggleClass('visible');
});

CSS：

dd {
    visibility: hidden;
}

dd.visible {
    visibility: visible;
}

当然，如果你的超文本标记语言不是那么复杂，那么Nick's answer会做得很好。有关这方面的简单演示，请参阅：http://www.jsfiddle.net/EA4R5/4/。