如何動態地將菜單項添加到彈出窗口？

Question

我需要使用下拉菜單實現 header。 header 中有三個菜單項，第四項是省略號。 將鼠標懸停在省略號上時，菜單會退出。 我怎樣才能實現這樣的功能 - 添加新菜單項時，最后第 3 項添加到彈出菜單中，並且在第 1 位會有一個新項。 現在在我的代碼中，如果有超過 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);

不要使用此代碼。 創建您自己的清潔解決方案