求助：Bootstrap移动端Toggle Menu点击后无法展开

问题根源 #

1. 版本冲突：页面同时引入了Bootstrap 5和Bootstrap 4的JS文件，两个版本的逻辑冲突导致折叠功能失效
2. 属性错误：Bootstrap 5的折叠按钮需要使用data-bs-toggle="collapse"属性，代码里误用了Bootstrap 4的data-toggle="collapse"，属性名不匹配
3. 冗余引入：底部重复多次引入jQuery、Bootstrap 4的JS文件，既冗余又会引发冲突

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Bootstrap</title>
</head>
<body>
    <div class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a href="" class="navbar-brand">NinjaXeries</a>
            <button 
                class="navbar-toggler" 
                data-bs-toggle="collapse"
                data-bs-target="#ccs"
            >
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="ccs">
                <ul class="navbar-nav">
                    <li class="nav-item"><a href="" class="nav-link">Home</a></li>
                    <li class="nav-item"><a href="" class="nav-link">Price</a></li>
                    <li class="nav-item"><a href="" class="nav-link">General</a></li>
                    <li class="nav-item"><a href="" class="nav-link">Galle</a></li>
                </ul>
            </div>            
        </div>
    </div>

    <div class="container mt-3">
        <div class="row">
            <div class="col-12 ">
                <h1 class="text-center">Our Destination</h1>
                <p class="text-center lead">Let's Go</p>
            </div>      
        </div> <!--row-->

        <div class="row">
            <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-2 col-xxl-2">
                <h1 class="text-center">Berlin</h1>
                <img src="img/img1.jpg" width="250px" height="250px" class="mx-auto d-block img-fluid">
                <P class="text-center">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur non, mollitia voluptates nemo culpa perferendis numquam, et totam, minus labore libero accusantium recusandae magnam incidunt.</P>
            </div>

            <div class="col-12  col-sm-6 col-md-4 col-lg-4 col-xl-2 col-xxl-2">
                <h1 class="text-center">Sri Lanka</h1>
                <img src="img/img2.jpg" width="250px" height="250px" class="mx-auto d-block img-fluid">
                <P class="text-center">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur non, mollitia voluptates nemo culpa perferendis numquam, et totam, minus labore libero accusantium recusandae magnam incidunt.</P>
            </div>

            <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-2 col-xxl-2">
                <h1 class="text-center">Canada</h1>
                <img src="img/img3.jpg" width="250px" height="250px" class="mx-auto d-block img-fluid">
                <P class="text-center">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur non, mollitia voluptates nemo culpa perferendis numquam, et totam, minus labore libero accusantium recusandae magnam incidunt.</P>
            </div>

            <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-2 col-xxl-2">
                <h1 class="text-center">Europe</h1>
                <img src="img/img4.jpg" width="250px" height="250px" class="mx-auto d-block img-fluid">
                <P class="text-center">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur non, mollitia voluptates nemo culpa perferendis numquam, et totam, minus labore libero accusantium recusandae magnam incidunt.</P>
            </div>

            <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-2 col-xxl-2">
                <h1 class="text-center">Nether</h1>
                <img src="img/img5.jpg" width="250px" height="250px" class="mx-auto d-block img-fluid">
                <P class="text-center">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur non, mollitia voluptates nemo culpa perferendis numquam, et totam, minus labore libero accusantium recusandae magnam incidunt.</P>
            </div>

            <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-2 col-xxl-2">
                <h1 class="text-center">Amster</h1>
                <img src="img/img6.jpg" width="250px" height="250px" class="mx-auto d-block img-fluid">
                <P class="text-center">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur non, mollitia voluptates nemo culpa perferendis numquam, et totam, minus labore libero accusantium recusandae magnam incidunt.</P>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

核心修复动作 #

• 删除所有Bootstrap 4及重复的JS文件，仅保留Bootstrap 5的bootstrap.bundle.min.js（已包含Popper，无需额外引入jQuery）
• 将折叠按钮的data-toggle替换为Bootstrap 5要求的data-bs-toggle
• 确保CSS与JS版本统一为Bootstrap 5

内容的提问来源于stack exchange，提问作者nipun