从左侧菜单滑入

Question

我正在尝试使菜单在左侧的子菜单中滑动，在悬停操作上。但是，通过此代码，所有子菜单都会打开，而不仅仅是悬停链接的子菜单。 这是我的HTML代码：

<ul id="NavMeni"> 
    <li><a href="/hr">Početna</a></li> 
    <li><a href="#">Top Level Link</a> 
     <ul class="NavPodMeni"> 
      <div><i class="fa fa-chevron-left"></i><p class="clear"></p></div> 
      <h1>Privlaka</h1> 
      <li><a href="#">Second Level Link</a></li> 
      <li><a href="#">Second Level Link Level Link Level Link</a></li> 
      <li><a href="#">Second Level Link</a></li> 
     </ul></li> 
    <li><a href="/en">Nin</a> 
     <ul class="NavPodMeni"> 
      <div><i class="fa fa-chevron-left"></i><p class="clear"></p></div> 
      <h1>Privlaka</h1> 
      <li><a href="#">Second Level Link</a></li> 
      <li><a href="#">Second Level Link Level Link Level Link</a></li> 
      <li><a href="#">Second Level Link</a></li> 
     </ul></li> 
    <li><a href="/de">Kalendar događanja</a></li> 
    <li><a href="/it">Smještaj</a></li> 
    <li><a href="/hr">Aktivni odmor</a></li> 
    <li><a href="/en">Multimedija</a></li> 
    <li><a href="/de">Info</a></li> 
</ul> 

这是我的jQuery代码：

jQuery(document).ready(function() { 
    jQuery("nav ul#NavMeni li a").hover(function() { 
     $("nav ul#NavMeni li > .NavPodMeni").animate({ 'left': '250px' }, 'slow'); 
    }); 
    jQuery("nav ul#NavMeni ul.NavPodMeni p i").click(function() { 
     $(".NavPodMeni").animate({ 'left': '0px' }, 'slow'); 
    }); 
}); 

Answer 1

您可以使用$(this)目标悬停的锚和closest()拿到第一.NavPodMeni当从向上遍历DOM树的a和i元素：

jQuery(document).ready(function() { 
    jQuery("nav ul#NavMeni li a").hover(function() { 
     $(this).closest('.NavPodMeni').animate({ 'left': '250px' }, 'slow'); 
    }); 
    jQuery("nav ul#NavMeni ul.NavPodMeni i").click(function() { 
     $(this).closest('.NavPodMeni').animate({ 'left': '0px' }, 'slow'); 
    }); 
}); 

您还需要删除p在你的第二个选择器中，因为i不是p的子项