Javascript 从左菜单滑动

我试着制作一个菜单，在悬停动作中，从左边的子菜单中滑动。但是使用此代码可以打开所有子菜单，而不仅仅是悬停链接中的子菜单。 这是我的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>

当从

a

和

i

元素向上遍历DOM树时，可以使用

$（this）

以悬停锚点为目标，并获取第一个

.NavPodMeni

：

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

的子对象。壁橱（）什么也没有发生，现在什么也没有打开。@Akul Von Itram，with closets（），或with closes（）？我想这不起作用，因为

。NavPodMeni

不是

a

的父对象。怎么样

$（this.parent（）.find（'.NavPodMeni'）.animate（{'left'：'250px'}，'slow'）？
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');
    });
});