アンカータグクラスの代わりにli要素クラスで動作するようにjQueryステートメントを変更するにはどうすればよいですか？

Question

この記事の範囲を超えた制約のため、アンカータグのクラスではなく、リスト要素のクラスに基づいて機能するjQueryをいくつか修正する必要があります。ここで

は、現在のコードです：

<script type="text/javascript"> 
$(function() { 
    $('#sub-nav > ul > li') 
     .children('a.drop').mouseenter(function() { 
      $(this).siblings('ul').toggle("slow"); 
      return false; 
     }).end() 
     .children('ul').hide(); 
}); 
</script> 

、それは、このHTML上で素晴らしい仕事：

<div id="subContent"> 
<ul> 
<li><a href="nikon.html">Nikon</a></li> 

<li class="cameras"><a href="#" class="drop">Cameras</a> 
<ul> 
<li><a href="nikon-d3x.html">Nikon D3x</a></li> 
<li><a href="nikon-d3s.html">Nikon D3s</a></li> 
<li><a href="nikon-d700.html">Nikon D700</a></li> 
<li><a href="nikon-d300s.html">Nikon D300s</a></li>  
</ul> 
</li> 

<li class="lenses"><a href="#" class="drop">Lenses</a> 
<ul> 
<li><a href="24-70.html">Nikkor 24-70 f2.8</a></li> 
<li><a href="80-200.aspx">Nikkor 80-200 f2.8</a></li> 
<li><a href="300.html">Nikkor 300 f2.8</a></li> 
<li><a href="50.html">Nikkor 50 f1.4</a></li> 
</ul> 
</li> 

<li class="bags"><a href="#" class="drop">Bags</a> 
<ul> 
<li><a href="bag1.html">Small Bag</a></li> 
<li><a href="bag2.html">Medium Bag</a></li> 
<li><a href="bag3.html">Large Ba</a></li> 
</ul> 
</li> 
<li><a href="#" class="drop">Memory Cards</a></li> 
</ul> 
</div> 

しかし、私はクラス=「ドロップ」を移動し、親リストの要素を変更する必要があります

オリジナル：<li class="cameras"><a href="#" class="drop">Cameras</a>

から <li>へ3210

新規：<li class="cameras drop"><a href="#">Cameras</a>

この変更に対応するためにjQueryを変更するにはどうすればよいですか？出来ますか？

ありがとうございます！

Answer 1

this fiddleは、提供されたコードと同じ動作をします。

Answer 2

$('#sub-nav > ul > li.drop > a:first-child').mouseenter(function{... 

EDIT：代わりに:firstの使用:first-child。