无法复制启动侧边栏箭头

huangapple go评论104阅读模式
英文:

Cannot replicate bootstrap sidebar arrow

问题

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:

<!-- 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=&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%;
}

<!-- language: lang-html -->

&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;

<!-- end snippet -->

答案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;
}

huangapple
  • 本文由 发表于 2023年6月9日 07:33:16
  • 转载请务必保留本文链接:https://go.coder-hub.com/76436322.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定