为什么单击按钮时我的 bootstrap 边栏没有折叠？

Question

我用 bootstrap 写了一个网页。我有一个边栏，我希望边栏在单击按钮时折叠（切换边栏按钮）。我添加了一个 java 脚本来启用该功能，但它不起作用。

tst.html

<!DOCTYPE html>
<html lang="english">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href='style.css'>    

    <title>Testing</title>

    <!-- Bootstrap CSS CDN -->
    <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
        crossorigin="anonymous"
    >     

    <!-- Our Custom CSS -->
    <link rel="stylesheet" href="style.css">

    <!-- Font Awesome JS -->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>


</head>

<body>
    <div class="container-fluid">
        <nav class=" navbar navbar-expand-lg navbar-light fixed-top bg-light py-lg-0 " id="customNavbar">  
            <a class="navbar-brand" href="/">
                <!-- Add logo -->
                <img src={{url_for('static', filename='images/Healdoc_new_4.png')}} alt="logo">
            </a>
            
            <button class="navbar-toggle-collapsed d-block d-sm-block d-md-none" type="button"
                    data-toggle="collapse" 
                    data-target="#navbarResponsive"
                    aria-controls="navbarResponsive" 
                    aria-expanded="true" 
                    aria-label="Toggle navigation"
                    id="togglerButton">
                    
                    <span class="line"></span> 
                    <span class="line"></span> 
                    <span class="line" style="margin-bottom: 0;"></span>
            </button>
    
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="/">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/About">About</a>                        
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Services
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <li><a class="dropdown-item" href="/Services/Profile">profile</a></li>
                            <li><a class="dropdown-item" href="#">Service 2</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#">Something else here</a></li>
                        </ul>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="/Contact">Contact</a>
                    </li>
                </ul>
            </div>        

            <form class="lg-flex">
                <button type="button" href="/signin"  class="btn btn-custom">Sign In</button>
                <button type="button" class="btn btn-custom">Sign Up</button>
            </form>
        </nav>    
    </div>

    <div class="row">

        <div class="col-md-2">
            <div class="wrapper">
                <!-- Sidebar -->
                <nav id="sidebar">
                    <div class="sidebar-header">
                        <h3>Bootstrap Sidebar</h3>
                    </div>

                    <ul class="list-unstyled components">
                        <p>Dummy Heading</p>
                        <li class="active">
                            <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Option 1</a>
                            <ul class="collapse list-unstyled" id="homeSubmenu">
                                <li>
                                    <a href="#">Option 1a</a>
                                </li>
                                <li>
                                    <a href="#">Option 1b</a>
                                </li>
                                <li>
                                    <a href="#">Option 1c</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">Option 2</a>
                        </li>
                        <li>
                            <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pages</a>
                            <ul class="collapse list-unstyled" id="pageSubmenu">
                                <li>
                                    <a href="#">Page-1</a>
                                </li>
                                <li>
                                    <a href="#">Page-2</a>
                                </li>
                                <li>
                                    <a href="#">Page-3</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">Option 3</a>
                        </li>
                        <li>
                            <a href="#">Option 4</a>
                        </li>
                    </ul>
                </nav>
            </div>        
        </div>

        <div class="col-md-10">
            <div class="container-fluid">
                <div id="content">
                    <nav class="navbar navbar-expand-lg navbar-light bg-light">
                            <button type="button" id="sidebarCollapse" class="btn">
                                <i class="fas fa-align-left"></i>
                                <span>Toggle Sidebar</span>
                            </button>
                    </nav>
                </div>
            </div>

            <div class="container-fluid">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem est eius veritatis tempore, amet reiciendis! Blanditiis fugit fugiat nesciunt praesentium reprehenderit consectetur minus doloribus facilis explicabo fuga velit, magni minima?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia numquam doloremque aliquid rem aut dolor amet quia! Eligendi illum ut suscipit assumenda asperiores aperiam praesentium expedita, quas omnis commodi necessitatibus.
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto, officia id ex natus architecto nesciunt ipsam. Natus, incidunt? Quibusdam quam minus, repellat magnam eos adipisci debitis minima possimus facere ab.             
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem est eius veritatis tempore, amet reiciendis! Blanditiis fugit fugiat nesciunt praesentium reprehenderit consectetur minus doloribus facilis explicabo fuga velit, magni minima?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia numquam doloremque aliquid rem aut dolor amet quia! Eligendi illum ut suscipit assumenda asperiores aperiam praesentium expedita, quas omnis commodi necessitatibus.
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto, officia id ex natus architecto nesciunt ipsam. Natus, incidunt? Quibusdam quam minus, repellat magnam eos adipisci debitis minima possimus facere ab.                
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem est eius veritatis tempore, amet reiciendis! Blanditiis fugit fugiat nesciunt praesentium reprehenderit consectetur minus doloribus facilis explicabo fuga velit, magni minima?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia numquam doloremque aliquid rem aut dolor amet quia! Eligendi illum ut suscipit assumenda asperiores aperiam praesentium expedita, quas omnis commodi necessitatibus.
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto, officia id ex natus architecto nesciunt ipsam. Natus, incidunt? Quibusdam quam minus, repellat magnam eos adipisci debitis minima possimus facere ab.                
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem est eius veritatis tempore, amet reiciendis! Blanditiis fugit fugiat nesciunt praesentium reprehenderit consectetur minus doloribus facilis explicabo fuga velit, magni minima?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia numquam doloremque aliquid rem aut dolor amet quia! Eligendi illum ut suscipit assumenda asperiores aperiam praesentium expedita, quas omnis commodi necessitatibus.
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto, officia id ex natus architecto nesciunt ipsam. Natus, incidunt? Quibusdam quam minus, repellat magnam eos adipisci debitis minima possimus facere ab.                
                
                </p>
            </div>        
        </div>
    </div>

    <!-- javascript to add navbar collapse functionality on button click -->
    <script>
        $(document).ready(function() {
            $('#sidebarCollapse').click(function() {
                $('#sidebar').toggleClass('active');
            });
        });
    </script>

    <!-- jQuery CDN - Slim version (=without AJAX) -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>    

</body>

</html>

Css 文件可能不是必需的，但我仍然在下面提供以供参考。

style.css

#customNavbar .navbar-nav .nav-item .nav-link {
    color: #4a438f;
    font-weight: bold;
}

#customNavbar .btn-custom {
    background-color: #4a438f;
    color: #fff;
}

#customNavbar .navbar-toggler-icon {
    color: #4a438f;
}

#togglerButton {
    width: 47px;
    height: 34px;
    background-color: #4a438f;
    border: none;
}

#togglerButton .line {
    width: 100%;
    float: left;
    height: 2px;
    background-color: #fff;
    margin-bottom: 5px;
}

#customNavbar .dropdown-menu .dropdown-item {
    color: #4a438f;
    font-weight: bold;
}

.wrapper {
    display: flex;
    align-items: stretch;
}

#sidebar {
    min-width: 230px;
    min-height: 100vh;
}

#sidebar.active {
    margin-left: -250px;
}

a[data-toggle="collapse"] {
    position: relative;
}

#sidebar .dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
}

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
}

#sidebarCollapse {
    background-color: #4a438f;
    color: #fff;
}

body {
    margin-top: 70px;
    font-family: 'Poppins', sans-serif;
    background: #fff;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #4a438f;
}

a,
a:hover,
a:focus {
    text-decoration: none;
    transition: all 0.3s;
}

#sidebar {
    /* don't forget to add all the previously mentioned styles here too */
    background: #e9ebf1;
    color: #fff;
    transition: all 0.3s;
}

#sidebar .sidebar-header {
    padding: 20px;
    background: #4a438f;
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #4a438f;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
    font-weight: bold;
    background-color: #4a438f;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
    color: #4a438f;
    font-weight: bold;
}

#sidebar ul li a:hover {
    color: #4a438f;
    background: #fff;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
    color: #4a438f;
    background: #f7f6fa;
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #f7f6fa;
}

Answer 1

将您的代码放在 jQuery/Bootstrap 脚本的链接之后，如下所示：

    <!-- jQuery CDN - Slim version (=without AJAX) -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>  


    <!-- javascript to add navbar collapse functionality on button click -->
    <script>
        $(document).ready(function() {
            $('#sidebarCollapse').click(function() {
                $('#sidebar').toggleClass('active');
            });
        });
    </script>

为什么单击按钮时我的 bootstrap 边栏没有折叠？

Why is my bootstrap sidebar not collapsing on button click?

html

javascript

css

sidebar