當我折疊側邊欄時，我希望文本隱藏并保持 SVG 可見。
它按預期作業，但由于某種原因，當側邊欄折疊時，“專案”的 SVG 消失（其他 svg 會按預期顯示）
我試過的：
CSS（截斷）
添加了Projects當側邊欄折疊時不顯示文本的規則（不起作用）
#sidebar.active #sidebarProjectsText{
display: none;
}
display: block當側邊欄處于活動狀態或未處于活動狀態（不起作用）時向svg添加規則
#sidebar #projectsSvg,
#sidebar.active #projectsSvg {
display: block;
}
期望的輸出：
Projects折疊時文本和箭頭消失- 無論側邊欄的狀態如何（活動或非活動），Svg 影像始終可見
JS FIDDLE 與 Nimeshka Srimal 的答案實作
uj5u.com熱心網友回復：
這是因為您的樣式已應用于.sidebar-item該類，而您的專案選單項沒有該類。
只需用<div>or包裹它<span>并添加.sidebar-item類。
<div class="card-header" id="headingOne">
<h5 class="mb-0 d-flex flex-nowrap">
<svg id="projectsSvg" ...></svg>
<div class="sidebar-item">
<button
id="btnProjectsSidebar"
...
>
<span id="sidebarProjectsText text-nowrap">Projects</span>
<i id="profile-chevron-down" class="bi bi-chevron-down ml-2"> </i>
</button>
</div>
</h5>
</div>
您可能需要修復其他樣式。
回答更新的問題：為 svg 圖示提供固定寬度。
前任：
.sidebar-element svg {
min-width: 55px;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/384998.html
上一篇：SVG中的可訪問圖表