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

Posted 2023-02-22

【中文标题】Bootstrap 在初始状态下折叠菜单箭头

【英文标题】：Bootstrap collapse menu arrows at initial state

【发布时间】：2021-09-28 03:44:27

【问题描述】：

我正在使用 Bootstrap 折叠来实现带有子菜单的垂直菜单。我可以通过单击字体真棒箭头图标来切换子菜单内容的可见性。箭头向下时显示子菜单，向上时隐藏。

一切正常，除非我希望最初扩展所有子菜单。箭头应该指向上方时却指向下方。

我的代码：

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

任何建议将不胜感激

【参考方案1】：

由于collapsed 类，在

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

删除 collapsed 类

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

<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 " href="#submenu1" data-toggle="collapse" data-target="#submenu1" aria-expanded="true">
            <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 " 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>