jquery悬停功能仅适用于带类的ul？

Question

我正在研究一个小下拉菜单：

<ul>
<li class="section-title">HEADER which triggers dropdown</li>
   <li><a href="element_one">element one</a></li>
   <li><a href="element_one">element one</a></li>
   <li><a href="element_one">element one</a></li>
</ul>

<ul>
   <li><a href="element_one">element one</a></li>
   <li><a href="element_one">element one</a></li>
   <li><a href="element_one">element one</a></li>
</ul>



$('#menu ul').hover(
  function () {  
    $(this).children("li").show('fast');
  },
  function () {
    $(this).children("li").not(':first-child, .active').hide('fast');    
  }
);

我想知道如何将悬停功能限制为仅具有“.section-title”第一个子级的 ul。悬停功能应该只针对带有 .section-title 的 ul 触发。

这可能吗？

Answer 1

反过来做。

$('li.section-title:first-child').parent().hover(function(){
     $(this).children("li").show('fast');
}, function(){
     $(this).children("li").not(':first-child, .active').hide('fast');
});

Answer 2

$('#menu ul li').eq(0).hasClass('section-title').parent().hover(...);

Answer 3

尝试

$('#menu ul').each(function(){
  var  bol = $(this).children('li.section-title') > 0;
  if (bol){
       $(this).hover(
           function () {  
              $(this).children("li").show('fast');
           },
           function () {
              $(this).children("li").not(':first-child, .active').hide('fast');    
           }
       );
  }
});