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。

Answer 2

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

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

CSS：

dd {
    visibility: hidden;
}

dd.visible {
    visibility: visible;
}

当然，如果你的HTML并不复杂，那么Nick's answer就能做得很好。请参阅：http://www.jsfiddle.net/EA4R5/4/以获得此简单演示。

隐藏。孩子很容易 - 那些属于</dd> <dt>的<dd> </dt>

2 个答案: