我曾試圖搜索過去類似的問題，但沒有成功。

我有一個可以展開和折疊的導航系統，但是它不起作用。我不確定我做錯了什么，我看到aria-expanded保持為真，不會翻轉回假。

這是html

<!-- hamburger nav -->
<div id="navRow" class="row">
    <div class="col-sm-12 p-0">
        <nav class="navbar navbar-expand-lg d-flex justify-content-start d-flex d-md-none d-lg-none d-xl-none">
            <button id="navbarToggler"
                class="navbar-toggler ms-2 collapsed d-flex d-md-none d-lg-none d-xl-none flex-column justify-content-around" type="button"
                data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="toggler-icon top-bar"></span>
                <span class="toggler-icon middle-bar"></span>
                <span class="toggler-icon bottom-bar"></span>
            </button>
            <div id="navbarNav" class="collapse navbar-collapse">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Pet Profile</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">My Pet Providers</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" tabindex="-1">Pet Community</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Emergency Providers</a>
                    </li>
                    <hr>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Communication Preferences</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Account</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" tabindex="-1">Manage Users</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Settings</a>
                    </li>
                    <hr>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About Petszel</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About Staff & Experts</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">About Shelter</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>

這是css

/* hamburger nav */
@media (max-width: 767px) {
    #navHeight:active,
    #navHeight:focus {
        height: 100vh;
    }

    .navbar-toggler {
        width: 30px;
        height: 30px;
        position: relative;
        transition: .5s ease-in-out;
    }

    .navbar-toggler,
    .navbar-toggler:focus,
    .navbar-toggler:active,
    .navbar-toggler-icon:focus {
        outline: none;
        box-shadow: none;
        border: 0;
        position: relative;
    }

    .navbar-toggler span {
        margin: 0;
        padding: 0;
    }

    .toggler-icon {
        display: block;
        position: absolute;
        height: 4px;
        width: 100%;
        background-color: #000000;
        border-radius: 14px;
        opacity: 1;
        left: 0;
        transform: rotate(0deg);
        transition: .25s ease-in-out;
    }

    .middle-bar {
        margin-top: 0px;
    }

    /* when navigation is clicked */
    .navbar-toggler .top-bar {
        top: inherit;
        transform: rotate(135deg);
    }

    .navbar-toggler .middle-bar {
        opacity: 0;
        top: inherit;
        filter: alpha(opacity=0);
    }

    .navbar-toggler .bottom-bar {
        top: inherit;
        transform: rotate(-135deg);
    }

    /* State when the navbar is collapsed */

    .navbar-toggler.collapsed .top-bar {
        position: absolute;
        top: 0px;
        transform: rotate(0deg);
    }

    .navbar-toggler.collapsed .middle-bar {
        opacity: 1;
        position: absolute;
        top: 10px;
        filter: alpha(opacity=100);
    }

    .navbar-toggler.collapsed .bottom-bar {
        position: absolute;
        top: 20px;
        transform: rotate(0deg);
    }

    #navbarNav.collapsing,
    #navbarNav.collapse.show {
        height: 100vh;
        transition: .25s ease-in-out;
        margin-top: -39px;
    }

    #navbarNav {
        background-color: rgba(255, 255, 255, 1);
        background: linear-gradient(180deg,
                rgba(39, 142, 187, 0.25),
                rgba(39, 142, 187, 0.20),
                rgba(39, 142, 187, 0.12),
                rgba(39, 142, 187, 0.08),
                rgba(255, 191, 135, 0.12),
                rgba(255, 191, 135, 0.15),
                rgba(255, 191, 135, 0.22),
                rgba(246, 133, 34, 0.25));

        overflow: hidden;

    }

    .navbar-nav {
        padding: 50px;
    }

我試著檢查我的引導鏈接，一切看起來都很好，我看到一些人有多個引導導入的問題。我嘗試了一些jquery和點擊處理程序。我還沒能解決這個問題。