使用可折疊 div CSS 放置和更改箭頭

Question

我的 html 代碼中有以下結構：

<ul id="urlcss">
   <li class="nav-submenu">
      <a class="collapsed" href="#" data-toggle="collapse" data-target="#submenu0">
         ADMIN
      </a>
      <div class="collapse" id="submenu0" aria-expanded="false">
         // Some menus check the image below
      </div>
   </li>
</ul>

如果你在瀏覽器上看到它，它看起來像這樣：

隨着菜單折疊顯示，像這樣：

好的，我想做的是，當用戶使用 nav-submenu class 按 li 時，我想顯示一個箭頭，指示下面的折疊菜單屬於該 li，並更改背景顏色，我嘗試使用 css 但沒有任何反應，這是我想要的一個例子（看箭頭）：

我試着做這段代碼來放置一個像持有人一樣的東西，但我不工作：

.nav-submenu[data-toggle].collapsed:after {
    content: " ▾";
}
.nav-submenu[data-toggle]:not(.collapsed):after {
    content: " ▴";
}

Answer 1

這是使用 BootStrap 5 Nav Using Dropdowns

只需很少的 css，您就可以實現您想要的。

 .nav-link.dropdown-toggle:after { transform: rotateX(-180deg); transition: transform 500ms; }.nav-link.dropdown-toggle.show:after { transform: rotateX(0deg); }.nav.nav-item:hover{ transition: background-color 500ms }.nav.nav-item:hover{ background-color: lightblue; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#">Separated link</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled">Disabled</a> </li> </ul>

Answer 2

我為你創建了一個小例子。 還使用一個小的 js 代碼來切換默認的 class 名稱。

 const menus = document.querySelectorAll('[data-toggle="collapse"]') for (const menu of menus) { menu.addEventListener('click', function(event) { this.classList.toggle('collapsed'); }) }

 .nav-submenu a.collapsed:after { content: " ▾"; }.nav-submenu a:not(.collapsed):after { content: " ▴"; }.nav-submenu a:not(.collapsed)+div { display:none; }

 <ul id="urlcss"> <li class="nav-submenu"> <a class="" href="#" data-toggle="collapse"> ADMIN </a> <div> // Some menus check the image below </div> </li> </ul>