我正在嘗試在無序列表中創建兩個無序列表部分，以便有兩個下拉菜單

Question

我想創建一個包含 9 個列表項的無序列表部分。 第一個 Li 項目包含一個內部無序列表。 第五個 Li 項目還包含一個內部無序列表。 包含內部 UL 的 Li 項目分別帶有“ - ”和“ + ”號，當我們將鼠標懸停在這些符號上時，它們會切換並打開內部 UL

這是顯示我要創建的 UL 部分的圖像

還有一個鏈接供參考，以顯示 UL 部分如何工作，以便更好地理解參考鏈接

誰能幫助我僅使用 HTML、CSS 和 JavaScript 重新創建此部分

Answer 1

你有一個很好的參考。 您可以通過檢查代碼來了解它是如何工作的。

該引用在ul中有一個ul ，它設置為display:none並將其更改為在hover上block 。

這是一個簡單的演示，其中列表在單擊時展開。

 const expand = () => { const list = document.querySelector('.innerList'); list.classList.toggle('show'); }

 li { list-style: none; }.innerList { padding: 0; display: none; }.show { display: block }

 <ul> <li>one</li> <li>one</li> <li> one <button class='btn' onclick="expand()">+</button> <ul class='innerList'> <li>a</li> <li>a</li> <li>a</li> <li>a</li> </ul> </li> <li>one</li> <li>one</li> </ul>