Javascript 在下拉菜单中相应地隐藏和显示子元素

我有一个下拉菜单，其中的父类别会自动在桌面上显示它们的子链接，并在移动设备上隐藏它们，直到它们被单击为止。如果窗口的大小变大，孩子们会再次出现

这几乎可以工作，但在调整窗口大小后，如果单击桌面上的父类别，它将滑动切换子元素。它还将在调整大小后运行多个slideToggle事件，而不仅仅是一个

我知道这可能是因为有两个slideToggle（）实例，但我在删除一个或其他实例时遇到了问题。有时它们永远不会在手机上打开，所以我发现两个实例都解决了这个问题

我正在寻找一个不那么臃肿、功能齐全的解决方案。我感谢所有的帮助，我希望从答案中获得知识

//开始忽略
$（'li.dropdown a'）。在（'click'，函数（事件）{
$（this.parent（）.toggleClass（'open'）；
});
$（'body'）。在（'click'，函数（e）上{
如果（！$（'li.dropdown'）.is（e.target）
&&$（'li.dropdown'）。具有（e.target）。长度==0
&&$（'.open'）。具有（e.target）。长度==0
) {
$（'li.dropdown'）.removeClass（'open'）；
}
});
//结束忽略
/****代码我需要下面的帮助****/
$（窗口）。调整大小（函数（）{
如果（$（window）.width（），则应删除click事件或在click事件中设置条件：

$('.top-nav-link').on('click', function(event){
    if ($(window).width()<768){
        event.preventDefault();
        $(this).parent().parent().find('.dropdown-nested-links').slideToggle();
            console.log('I worked.');
    }
});

$(window).resize(function(){
    if ($(window).width()>=768){
        $('.dropdown-nested-links').css('display', 'inline-block');
    }
});

$（'.top nav link'）。在（'click'，函数（事件）{
如果（$（窗口）.width（）=768）{
$（'.dropdown嵌套链接'）.css（'display'，'inline block'）；
}
});