從左側菜單滑入

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的子項