如何将菜单项动态添加到弹出窗口

Question

我需要实现一个带有下拉菜单的标题。标题中有三个菜单项，第四个是省略号。将鼠标悬停在省略号上时，菜单将退出。我该如何实现这样的功能？当添加新的菜单项时，最后的第三个项目会添加到弹出菜单中，并且在第一位会有一个新项目。现在在我的代码中，如果有超过3个项目，我会动态添加3个点。如何将菜单项添加到弹出窗口？

// ===== ADAPTIVE MENU
const headerMenu = document.querySelector(".header-menu__list");
const headerMenuLi = document.querySelectorAll(".header-menu__list li");
const headerMenuToArray = Array.from(headerMenuLi);
const ellipsisLi = document.createElement("li");
ellipsisLi.classList.add("open-sub__menu");
const ellipsisA = document.createElement("a");
ellipsisA.innerHTML = "<span>...</span>";
const subMenu = document.createElement("ul");
subMenu.classList.add("header-sub__menu");
ellipsisLi.appendChild(ellipsisA);
ellipsisLi.appendChild(subMenu);
const addEllipsis = (arr) => {
if (arr.length > 3) {
headerMenu.children[2].after(ellipsisLi);
}
};
addEllipsis(headerMenuToArray);

.header-sub__menu {
background: #171a21 none repeat scroll 0 0;
left: 0;
opacity: 0;
position: absolute;
top: 120%;
transition: all 0.3s ease 0s;
visibility: hidden;
width: 250px;
z-index: 9;
width: 200px;
height: 200px;
}
.open-sub__menu:hover .header-sub__menu {
opacity: 1;
top: 100%;
visibility: visible;
}

<div class="header-menu">
<ul class="header-menu__list">
<li><a href="">Find events</a></li>
<li><a href="">Create an event</a></li>
<li><a href="">Help</a></li>
</ul>
</div>

Answer 1

这个"解决方案"；生产还没有准备好吗。但是您可以发现如何操作DOM。

HTML

<ul id="nav"></ul>

JavaScript

const navElement = document.querySelector('#nav');
const navigationItems = ['Home', 'About', 'Products', 'Support', 'Contact'];
const createListItem = (label) => {
const li = document.createElement('li');
li.innerText = label;
return li;
};

let i = 0;
for (i; i < 3; i++) {
navElement.appendChild(createListItem(navigationItems[i]));
}
const ellipsisListItemElement = document.createElement('li');
ellipsisListItemElement.innerText = '...';
const subNav = document.createElement('ul');
ellipsisListItemElement.appendChild(subNav);
for (i; i < navigationItems.length; i++) {
subNav.appendChild(createListItem(navigationItems[i]));
}
navElement.appendChild(ellipsisListItemElement);

不要使用此代码。创建您自己的清洁解决方案