Скрывать .children легко - как насчет <dd>, которые принадлежат <dt>

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");
  });
});

Вы можете проверить это здесь , для связанных вопросов о DOM-навигации, переходе от одного элемента к другому, обязательно ознакомьтесь с разделом обхода дерева API jQuery .

Answer 2

К сожалению, это немного сложнее, чем кажется - несколько элементов dt могут использоваться в комбинации с несколькими элементами dd, поэтому вам придется использовать nextAll в комбинациис помощью соседнего селектора брата (+) :

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

CSS:

dd {
    visibility: hidden;
}

dd.visible {
    visibility: visible;
}

Конечно, если ваш HTML не так уж сложентогда ответ Ника пойдет хорошо.Смотрите: http://www.jsfiddle.net/EA4R5/4/ для простой демонстрации этого.