Javascript 响应jQuery导航显示下拉菜单单击移动和悬停桌面

我正在使用jQuery为子菜单动画开发一个响应/移动导航标题。在小屏幕上，我希望用户单击父项以设置下拉列表的动画，在大屏幕上，我希望用户将鼠标悬停在父项上

#导航链接

的内容将附加到使用jQuery调整窗口大小的

.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>

// 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);
    }
});