Question

我正在使用jQuery为子菜单动画开发响应/移动导航标题。在小屏幕上，我希望用户点击父<li>为下拉列表设置动画，在大屏幕上我希望它们悬停在父<li>上。

使用jQuery将#navigation-links的内容附加到窗口大小调整的.mobile-nav ul上。

HTML：

<ul id="navigation-links">
    <li>Item without Submenu</li>
    <li>Item without Submenu</li>
    <li>Item with Submenu
        <ul>
            <li>Submenu Item</li>
            <li>Submenu Item</li>
            <li>Submenu Item</li>
        </ul>
    </li>
    <li>Item with Submenu
        <ul>
            <li>Submenu Item</li>
            <li>Submenu Item</li>
            <li>Submenu Item</li>
        </ul>
    </li>
    <li>Item without Submenu</li>
    <li>Item without Submenu</li>
</ul>
<div class="mobile-nav">
    <ul></ul>
</div>

JS：

// Screen size larger than 600px
$("#navigation-links li").hover(function () {
    $(this).children("ul").animate({height: "toggle", opacity: "toggle"}, 400);
});


// Screen size smaller than 600px
$('.mobile-nav li').click(function () {
    if ($(this).has('ul')) {
        $(this).children('ul').animate({height: 'toggle', opacity: 'toggle'}, 250);
    }
});

在页面加载时，该功能正常工作;但是，如果您调整屏幕大小（从小到大，反之亦然），该功能就像它仍然是原始屏幕大小一样。

例如：如果您加载屏幕较小并单击父<li>，则菜单会下降。然后将屏幕大小调整为大，您仍然需要点击父<li>，而不是悬停。

Link to site with issue

响应式jQuery导航显示下载菜单点击移动和悬停桌面

0 个答案: