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和a元素遍历DOM树时获取第一个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的孩子

从左侧菜单中滑动

1 个答案: