问题

I am trying to create the 4th sidebar (from the left) using these Bootstrap 5 examples.

我正在尝试创建左侧第4个边栏，使用这些Bootstrap 5示例。

I am able to get everything except the arrow rotating when aria-expanded=true. I've tried different selectors, changing the aria labels but cannot get the arrow to rotate on expand.

除了在aria-expanded=true时旋转箭头之外，我能够获得一切。我尝试了不同的选择器，更改了aria标签，但不能使箭头在展开时旋转。

The snippet is as follows:

下面是代码片段：

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->
.btn-toggle-nav a {
  display: inline-flex;
  padding: 0.1875rem 0.5rem;
  margin-top: 0.125rem;
  margin-left: 1.25rem;
  text-decoration: none;
}

.btn-toggle[aria-expanded="true"]::before {
    transform: rotate(90deg);
}

.btn-toggle::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba(0,0,0,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform .35s ease;
  transform-origin: 0.5em 50%;
}

<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="col-3">
  <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
    <span class="fs-5 fw-semibold">Collapsible</span>
  </a>
  <ul class="list-unstyled ps-0">
    <li class="mb-1">
      <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="false">
        Home
      </button>
      <div class="collapse" id="home-collapse">
        <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
          <li><a href="#" class="link-dark rounded">Overview</a></li>
          <li><a href="#" class="link-dark rounded">Updates</a></li>
          <li><a href="#" class="link-dark rounded">Reports</a></li>
        </ul>
      </div>
    </li>
    <li class="mb-1">
      <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
        Dashboard
      </button>
      <div class="collapse" id="dashboard-collapse">
        <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
          <li><a href="#" class="link-dark rounded">Overview</a></li>
          <li><a href="#" class="link-dark rounded">Weekly</a></li>
          <li><a href="#" class="link-dark rounded">Monthly</a></li>
          <li><a href="#" class="link-dark rounded">Annually</a></li>
        </ul>
      </div>
    </li>
    <li class="border-top my-3"></li>
    <li class="mb-1">
      <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
        Account
      </button>
      <div class="collapse" id="account-collapse" style="">
        <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
          <li><a href="#" class="link-dark rounded">New...</a></li>
          <li><a href="#" class="link-dark rounded">Profile</a></li>
          <li><a href="#" class="link-dark rounded">Settings</a></li>
          <li><a href="#" class="link-dark rounded">Sign out</a></li>
        </ul>
      </div>
    </li>
  </ul>
</div>

<!-- end snippet -->

英文:

I am trying to create the 4th sidebar (from the left) using these Bootstrap 5 examples.

I am able to get everything except the arrow rotating when aria-expanded=true. I've tried different selectors, changing the aria labels but cannot get the arrow to rotate on expand.

The snippet is as follows:

.btn-toggle-nav a {
display: inline-flex;
padding: 0.1875rem 0.5rem;
margin-top: 0.125rem;
margin-left: 1.25rem;
text-decoration: none;
}
.btn-toggle[aria-expanded=&quot;true&quot;]::before {
transform: rotate(90deg);
}
.btn-toggle::before {
width: 1.25em;
line-height: 0;
content: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;16&#39; height=&#39;16&#39; viewBox=&#39;0 0 16 16&#39;%3e%3cpath fill=&#39;none&#39; stroke=&#39;rgba%280,0,0,.5%29&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;2&#39; d=&#39;M5 14l6-6-6-6&#39;/%3e%3c/svg%3e&quot;);
transition: transform .35s ease;
transform-origin: 0.5em 50%;
}

&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;div class=&quot;col-3&quot;&gt;
&lt;a href=&quot;/&quot; class=&quot;d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom&quot;&gt;
&lt;span class=&quot;fs-5 fw-semibold&quot;&gt;Collapsible&lt;/span&gt;
&lt;/a&gt;
&lt;ul class=&quot;list-unstyled ps-0&quot;&gt;
&lt;li class=&quot;mb-1&quot;&gt;
&lt;button class=&quot;btn btn-toggle align-items-center rounded collapsed&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#home-collapse&quot; aria-expanded=&quot;false&quot;&gt;
Home
&lt;/button&gt;
&lt;div class=&quot;collapse&quot; id=&quot;home-collapse&quot;&gt;
&lt;ul class=&quot;btn-toggle-nav list-unstyled fw-normal pb-1 small&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;link-dark rounded&quot;&gt;Overview&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;link-dark rounded&quot;&gt;Updates&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;link-dark rounded&quot;&gt;Reports&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li class=&quot;mb-1&quot;&gt;
&lt;button class=&quot;btn btn-toggle align-items-center rounded collapsed&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#dashboard-collapse&quot; aria-expanded=&quot;false&quot;&gt;
Dashboard
&lt;/button&gt;
&lt;div class=&quot;collapse&quot; id=&quot;dashboard-collapse&quot;&gt;
&lt;ul class=&quot;btn-toggle-nav list-unstyled fw-normal pb-1 small&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;link-dark rounded&quot;&gt;Overview&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;link-dark rounded&quot;&gt;Weekly&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;link-dark rounded&quot;&gt;Monthly&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;link-dark rounded&quot;&gt;Annually&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li class=&quot;border-top my-3&quot;&gt;&lt;/li&gt;
&lt;li class=&quot;mb-1&quot;&gt;
&lt;button class=&quot;btn btn-toggle align-items-center rounded collapsed&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#account-collapse&quot; aria-expanded=&quot;false&quot;&gt;
Account
&lt;/button&gt;
&lt;div class=&quot;collapse&quot; id=&quot;account-collapse&quot; style=&quot;&quot;&gt;
&lt;ul class=&quot;btn-toggle-nav list-unstyled fw-normal pb-1 small&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;link-dark rounded&quot;&gt;New...&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;link-dark rounded&quot;&gt;Profile&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;link-dark rounded&quot;&gt;Settings&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;link-dark rounded&quot;&gt;Sign out&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

答案1

得分: 1

你的 ::before 伪元素以 inline 方式显示。添加 display: inline-block 属性：

.btn-toggle::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba(0,0,0,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform .35s ease;
  transform-origin: 0.5em 50%;
  display: inline-block;
}

英文:

Your ::before pseudoelement is displayed inline. Add display: inline-block property:

.btn-toggle::before {
width: 1.25em;
line-height: 0;
content: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;16&#39; height=&#39;16&#39; viewBox=&#39;0 0 16 16&#39;%3e%3cpath fill=&#39;none&#39; stroke=&#39;rgba%280,0,0,.5%29&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;2&#39; d=&#39;M5 14l6-6-6-6&#39;/%3e%3c/svg%3e&quot;);
transition: transform .35s ease;
transform-origin: 0.5em 50%;
display: inline-block;
}

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

无法复制启动侧边栏箭头

问题

答案1

如何使用Python和静态网页（HTML、CSS和JS）创建移动应用程序。

更改子元素的字体大小为什么会导致弹性容器偏离原来的位置？

将变量从模态框 A 传递到模态框 B

图像定位 CSS 问题

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论