Javascript 在调整大小时，将li从嵌套ul移动到顶级ul会创建大量的li

我正在尝试创建一个响应菜单。在移动版本上，我希望ul显示4个列表项。在resize to desktop上，两个列表项被附加到以前未使用的嵌套ul。这个很好用。然而，如果我重新调整到手机大小，而不是将两个列表项追加到顶级ul，它似乎会创建一堆lis

$（文档）.ready（函数（）{
$（'.has child'）。单击（函数（）{
$（this.toggleClass（'clicked'）；
$（'.has child ul'）。toggleClass（'clicked'）；
});
});
$（窗口）.on（'resize'，function（））{
如果（$（窗口）.width（）>=800）{
$（'.nav container'）.detach（）.appendTo（'.header content'）；
$（'.has parent'）.appendTo（'.has child ul'）；
}否则{
$（'.nav container'）.detach（）.appendTo（'.site'）；
$（'.has parent'）.appendTo（'.site navigation ul'）；
}
}).trigger（'resize'）

















在更改浏览器宽度时，重新调整大小事件会重复激发。基本上，要解决这个问题，您需要有一些指示器，指示要追加的函数已经启动，并在完成后停止启动。
我想我已经按照您的要求完成了

然而，我必须说，这是一种有点奇怪的做事方式。现代框架喜欢并提供菜单css实用程序类，这取决于正在使用的媒体查询

简单地说，您可以有两个菜单，然后根据屏幕大小仅使用
css
显示或隐藏其中一个菜单


$（文档）.ready（函数（）{
$（'.has child'）。单击（函数（）{
$（this.toggleClass（'clicked'）；
$（'.has child ul'）。toggleClass（'clicked'）；
});
});
$（窗口）.on（'resize'，function（））{
如果（$（窗口）.width（）>=800）{
$（'.nav container'）.detach（）.appendTo（'.header content'）；
如果（$（'.has child ul li'）。长度==0）{
$（'.header content.has parent'）.detach（）.appendTo（'.has child ul'）；
}
}否则{
$（'.nav container'）.detach（）.appendTo（'.site'）；
如果（$（'.site navigation>ul>.has parent'）。长度==0）{
$（'.site.has parent'）.detach（）.appendTo（'.site navigation>ul'）；
}
}
});
*{框大小：边框框；}
.标题内容，.站点{
浮动：左；
宽度：50%；
背景：灰色；
高度：300px；
填充：30px；
}
.site{左边框：2px纯白；}

标题内容
场地
















已转换为代码段。您的调整大小功能当前正在删除页面中的所有内容。若要补充roger刚才所说的内容，请参见：您是否只在寻找jquery/native js解决方案？@taburetkin不太合适。@db1500然后您应该看看css媒体查询。正如我所看到的，你的任务可以在没有js的情况下用css完成。谢谢！我以前做过两个单独的菜单，但决定尝试。