jquery hover function only for ul with class?

Question

hi guys,

i'm working on a little dropdown menu:

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

i wonder how i can limit the hover function only to ul with a first-child of ".section-title". the hover-function should only fire for ul's with a .section-title.

is that possible?

Answer 1

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

Answer 2

try

$('#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');    
           }
       );
  }
});

Answer 3

do it reverse.

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