Jquery slideDown子ul

Question

どのように私は上に乗っている要素の子ulだけをスライドさせることができますか？

<ul> 
     <li class="main"> 
      <a href="real_estate.htm">Real Estate </a> 
      <ul class="sub"> 
       <li> <a href="#">Consulting Services</a></li> 
       <li> <a href="#">Investment</a></li> 
       <li> <a href="#">Property Management</a></li> 
       <li> <a href="#">Development</a></li> 
      </ul> 
     </li> 
     <li class="main"> 
      <a href="investment.htm">Investment</a> 
      <ul class="sub"> 
       <li><a href="#">Philosophy</a></li> 
       <li><a href="#">Criteria</a></li> 
      </ul> 
     </li> 
</ul> 

Jquery 

    $(document).ready(function() { 
    $(".sub").hide(); 
    $(".main").hover(function() { 
     $(".sub").slideDown('slow'); 
    }); 
}); 

Answer 1

コンテキストを追加：セレクタの

$(".sub", this).slideDown('slow'); 

第2のパラメータは、コンテキストです。 thisを渡すと、にの.sub要素が一致します。thisにあります。thisは、現在ホバーしている.mainを表します。

相当するものは次のようになります。

$(this).find('.sub').slideDown('slow'); 

もっとhttp://api.jquery.com/jQuery/#selector-context

Answer 2

$(document).ready(function() { 
    $(".sub").hide(); 
    $(".main").hover(function() { 
     $(this).find(".sub").slideDown('slow'); 
    }); 
}); 

this推移.mainと.findを指し、その中のすべての.subの要素を見つけます。

Answer 3

$(".main").hover(function() { 
    $(".sub", this).slideDown('slow'); 
}); 

Answer 4

で私はあなたの質問を理解すると思います。この場合、より多くのセレクタを使用したり、jQueryの最後の関数を見つけることができます。

CSS：

.sub { display: none; /* probably you will need height: 0; and/or position relative; left: Xpx; top: Ypx; to make the sub-menus at good position for showing.. */ } 

はJavaScript：

function hideMenu(obj) 
{ 
    // This is valid. Depending on situation you will see below another sample. 
    $(obj).find("ul").slideUp(); 
    // or 
    // $(obj + " ul").slideUp(); 
} 

function showMenu(obj) 
{ 
    // This is valid. Depending on situation you will see below another sample. 
    $(obj).find("ul").slideDown(); 
    // or 
    // $(obj + " ul").slideDown(); 
} 

私はあなたが全体のページを生成しているとし...この場合、あなたは、同じ方法でのli要素を生成する必要がありますが、追加されますonmouseover = "showMenu（この）" れるonmouseout = "hideMenu（本）"：

<li onmouseover="showMenu(this)" onmouseout="hideMenu(this)">...</li> 

あなたはJavaScripを含める必要があなたのHTMLのtファイル - 頭のタグで：

<script type="text/javascript" src="path to the file"></script> 

これは模式的な表現です。