css 初始状态下的 Bootstrap 折叠菜单箭头

oaxa6hgo 于 2023-01-03 发布在 Bootstrap

关注(0)|答案(2)|浏览(234)

我正在使用Bootstrap collapse实现一个带有子菜单的垂直菜单。我可以通过单击一个字体很棒的箭头图标来切换子菜单内容的可见性。当箭头指向下方时，子菜单会显示，而当箭头指向上方时，子菜单会隐藏。
一切都很好，除了当我希望我所有的子菜单最初都被展开的时候。箭头在应该指向上的时候指向下。
我的代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/d45e7e578e.js" crossorigin="anonymous"></script>

<ul class="mymenu nav flex-column">
    <li class="nav-item"> 
        <a class="nav-link collapsed" href="#submenu1" data-toggle="collapse" data-target="#submenu1">
            <span>Menu Item</span>
        </a>
        <div class="collapse show" id="submenu1" aria-expanded="true">
            <ul class="flex-column nav">
                <li class="nav-item">
                    <a class="nav-link py-0" href="#">
                        <span>Submenu Item</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link py-0" href="#">
                        <span>Submenu Item</span>
                    </a>
                </li>
            </ul>
        </div>
    </li>
    <li class="nav-item"> 
        <a class="nav-link collapsed" href="#submenu2" data-toggle="collapse" data-target="#submenu2">
            <span>Menu Item</span>
        </a>
        <div class="collapse show" id="submenu2" aria-expanded="true">
            <ul class="flex-column nav">
                <li class="nav-item">
                    <a class="nav-link py-0" href="#">
                        <span>Submenu Item</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link py-0" href="#">
                        <span>Submenu Item</span>
                    </a>
                </li>
            </ul>
        </div>
    </li>
</ul>

CSS：

.nav-item{
    position:  relative;
}
.nav-link[data-toggle].collapsed:after {
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f078"; 
    color:  #444444;
    position: absolute;
    right: 10px;
}
.nav-link[data-toggle]:not(.collapsed):after {
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f077"; 
    color:  #444444;
    position: absolute;
    right: 10px;
}

如有任何建议，我们将不胜感激

css

来源：https://stackoverflow.com/questions/68458090/bootstrap-collapse-menu-arrows-at-initial-state

2条答案

按热度按时间

5lhxktic1#

由于collapsed类，在

<a class="nav-link collapsed" href="#submenu1" data-toggle="collapse" data-target="#submenu1">
        <span>Menu Item</span>
</a>

删除collapsed类

x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-01-03

hgc7kmma2#

.cu-accordion-item {
    border-bottom: 1px solid var(--text-gray);
    outline: none;
    position: relative;  
}

.cu-accordion-item:last-child {
    border-bottom: none;
}
.cu-btn-accordion {
    width: 100%;
    height: 64px;
    color: black;
    font-weight: 700;
    font-size: 21px;
    text-transform: capitalize;
    background-color: transparent;
    box-shadow: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    border-bottom: 1px solid gray;
 }
.cu-btn-accordion:after {
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f078";";
    position: absolute;
    right: 5px;
    color: red;
}

.cu-btn-accordion:not(.collapsed):after {
    content: "\F077";
}

<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    
<script src="https://kit.fontawesome.com/d45e7e578e.js" crossorigin="anonymous"></script>

<div class="accordion" id="more-options">
   <div class="cu-accordion-item">
      <button id="btn-collapse-general" class="cu-btn-accordion
                            collapsed" data-bs-toggle="collapse" data-bs-target="#box-collapse-general" aria-expanded="false" aria-controls="box-collapse-general" type="button">
                            general
                        </button>
                        <div id="box-collapse-general" class="accordion-collapse
                            collapse" aria-labelledby="btn-collapse-general" data-bs-parent="#more-options">
                            <div class="accordion-body">
                               general
                            </div>
                        </div>
                    </div>
                    <div class="cu-accordion-item">
                        <button id="btn-collapse-routes" class="cu-btn-accordion
                            collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#box-collapse-routes" aria-expanded="false" aria-controls="box-collapse-routes">
                            routes
                        </button>
                        <div id="box-collapse-routes" class="accordion-collapse
                            collapse" aria-labelledby="btn-collapse-routes" data-bs-parent="#more-options">
                <div class="accordion-body">
                               routes
               </div>
          </div>
       </div>
                   
</div>

赞(0）回复(0）举报 2023-01-03

我来回答

css 初始状态下的 Bootstrap 折叠菜单箭头

2条答案

相关问题

热门标签

最新问答