时间戳

首页 > 解决方案 > 如何从一个菜单中获取菜单项并将它们附加到不同的菜单

javascript - 如何从一个菜单中获取菜单项并将它们附加到不同的菜单

问题描述

我有一个带有几个链接的迷你菜单，必须隐藏平板电脑和移动屏幕尺寸上的链接，这很好用 css 和媒体查询执行此操作，但我还有一个带有不同链接的主菜单，并且在正常屏幕尺寸上显示为展开但在平板电脑和手机上显示为隐藏的可点击汉堡菜单。当迷你菜单中的链接被隐藏以成为主菜单的一部分时，我想要平板电脑和移动设备大小。我知道我必须在我的 .js 文件中创建某种 for 循环，在平板电脑和手机尺寸上，它会从 minu 菜单中获取菜单项并将它们附加到主菜单，但如果有人可以的话，我不确定该怎么做用代码线框帮助我如何做到这一点会很棒。

谢谢！

标签： javascriptmenu

解决方案

我建议将您希望在移动设备上看到的链接放在您的主菜单中，并为这些链接添加一个类，这些链接只会在移动设备上显示它们。如果它只是一个简单的链接，它应该可以完成这项工作。

<ul class="main-menu">
  <li>always visible<li>

  <li>always visible<li>

  <li class="visible-mobile">only visible on mobile<li>

  <li>always visible<li>
</ul>

然后在你的CSS中：

.main-menu .visible-mobile { display: none }

@media (max-width: ...) {
   .main-menu .visible-mobile { display: block }     
}

如果您仍然喜欢使用 javascript，这是一种方法

const mainMenu = document.querySelector('.main-menu');
const minuMenu = document.querySelector('.mini-menu');
const mobileBreakpoint = 767; // put your mobile breakpoint here
const isMobile = window.innerWidth < mobileBreakpoint; 

if ( isMobile ) {
    const listItems = miniMenu.querySelectorAll('li');
    mainMenu.appendChild(listItems);
}

推荐阅读