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

Popular posts from this blog

jquery - Invalid Assignment Left-Hand Side -

java - Play! framework 2.0: How to display multiple image? -

gmail - Is there any documentation for read-only access to the Google Contacts API? -