问题描述
因此，我在标题的移动设备上有一个汉堡菜单。在桌面上，情况发生了变化，菜单位于标题的左侧，主内容的左侧。是否有（JavaScript）使用现有标记的方法，即将nav标签及其内容移到#overlay之外，然后放在旁边标签中？还是复制菜单标记是唯一的方法？
<header>
<div id="overlay">
<nav id="navbar">
<ul class="menu">
<li class="item-group">
<a href="index.html">The Story.</a>
</li>
<li class="item-group">
<a href="everyday-life.html">Everyday Life</a>
</li>
</div>
</header>
<aside> Side menu on desktop </aside>
解决方法
代码如何工作
已向主体添加了一个功能，用于侦听屏幕onresize="navigationFunc()"的宽度。
要在重新加载页面时显示在正确的位置，添加了onload="navigationFunc()"。
当宽度小于1000像素时（您可以在代码中更改此值）。在ID为#mobile
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body onresize="navigationFunc()" onload="navigationFunc()">
<div id="desktop">
<div id="navigation">
Lorem ipsum dolor sit amet
</div>
</div>
<div id="mobile">
</div>
<script>
var nav = document.getElementById('navigation');
var dsk = document.getElementById('desktop');
var mob = document.getElementById('mobile');
function navigationFunc() {
var w = window.outerWidth;
if (w < 1000) {
// mob.appendChild(nav); // ADD LAST
mob.insertBefore(nav,mob.childNodes[0]); // ADD FIRST
} else {
// dsk.appendChild(nav); // ADD LAST
dsk.insertBefore(nav,dsk.childNodes[0]); // ADD FIRST
}
}
</script>
</body>
</html>
您可以通过选择父元素然后获取其子元素来实现。下一步是将子元素追加到另一个父元素，然后从当前父元素中删除该子元素
<div id="overlay">是父元素，<nav>是其子元素
您可以声明另一个父元素，即<div id="app">。
然后将<nav>元素及其内容
然后使用#app将其附加到父元素-appendChild()
并通过使用#overlay
removeChild()中删除子元素
请参见下面的代码段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<div id="overlay">
<nav>
<ul>
<li>hello</li>
<li>yo</li>
</ul>
</nav>
</div>
<script>
const app = document.querySelector('#app')
const overlay = document.querySelector('#overlay')
const el = overlay.firstElementChild // gets the elements inside the element with an id of overlay
app.appendChild(el)
overlay.removeChild()
</script>
</body>
</html>
您可以打开自己的chrome开发工具，然后转到“元素”标签。您会看到nav现在被包裹在#app内，但是在您的代码中，nav被包裹在overlay内