jquery - Displaying only one element that belongs to a class that is used by many elements -
having trouble showing submenu closest category hovered user. when users hover on category, submenus appear.
jquery
<script type="text/javascript"> $(document).ready(function(){ $(".category").hover(function(){ $(".submenu").show(); }); }); </script> html
<div id="sidebar"> <ul style="list-style-type:none;"> <li><a class="category" href="#">cars </a> <ul class="submenu" style="position:absolute; display:none;"> <li><a href="#">ford</a></li> <li><a href="#">chevy</a></li> <li><a href="#">vw</a></li> </ul> </li> <li><a class="category" href="#">food </a> <ul class="submenu" style="position:absolute; display:none;"> <li>fruits</li> <li>burgers</li> <li>veggies</li> </ul> </li> </ul> </div>
$(".submenu").show(); find elements matching selector. need find element relative clicked item $(this).
try:
$(".category").hover(function(){ $(this).next('ul').show(); }); or
$(".category").hover(function(){ $(this).next('.submenu').show(); });
Comments
Post a Comment