非表示.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"); 
    }); 
}); 

You can test it out here DOMのナビゲーションに関する関連する質問については、ある要素から別の要素への移動については、tree-traversal section of the jQuery APIを必ずチェックしてください。

Answer 2

残念ながら、これは、それが思われることもう少し複雑です - あなたはadjacent sibling selector (+)との組み合わせでnextAllを使用する必要がありますように、複数のdt要素は、複数のdd要素と組み合わせて使用​​することができます。

$('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/を参照してください。