子类别效果中的下拉菜单

Question

我正在使用导航栏中的下拉子菜单创建导航栏

像这样的代码：

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">lorem ....</a></li>
  <li><a class="dropdown-item" href="#">lorem ....</a></li>
  <li><a class="dropdown-item" href="#">lorem ....</a></li
</ul>

我的下拉列表是这样的：

我想要一个这样的下拉菜单：

Answer 1

请试试这个：

 const dropdown = document.querySelector('.container'); track = 0; dropdown.addEventListener('click', () => { const container = document.querySelector('.item-container'); if (track === 0) { container.style.maxHeight = '700px'; track++; } else { container.style.maxHeight = '0px'; track--; } })

 html, body { margin: 0; padding: 0; height: 100%; font-family: 'Lato', sans-serif; }.space { height: 20%; }.layout { display: flex; flex-direction: column; align-items: center; background: rgb(236, 236, 236); height: 60%; min-height: fit-content; }.container.item-container { max-height: 0; transition: max-height 0.3s; overflow: hidden; }.container { margin-top: 25px; text-align: center; background: rgb(223, 223, 223); border-radius: 5px; border: 1px solid white; max-width: 300px; min-width: 300px; box-shadow: 0px 0px 5px black; }.container:hover { background: rgb(212, 212, 212); }.dropdown-title { margin: 15px 0px 15px 0px; min-height: 10px; font-weight: 900; font-size: 1.3rem; }.item-container { background: rgb(255, 255, 255); font-size: 1rem; border-radius: 0px 0px 3px 3px; }.item-text { margin: 0px 0px 0px 0px; padding: 15px 10px 15px 10px; font-weight: 900; }.item-text:hover { background: rgb(231, 231, 231); }

 <div class="space"></div> <div class="layout"> <div class="container"> <p class="dropdown-title">Sample Title</p> <div class="item-container"> <p class="item-text">Sample Item</p> <p class="item-text">Sample Item</p> <p class="item-text">Sample Item</p> <p class="item-text">Sample Item</p> <p class="item-text">Sample Item</p> </div> </div> </div>