javascript - 隐藏 .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

而不是 .children() , 只需使用 .next() ，像这样:

$(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 .