css 引导移动的菜单在我的header.html中保持打开状态

x6h2sr28 于 2023-11-19 发布在其他

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

我有一个单独的html文件的头。所以我的索引，我也把所有必要的链接与引导工作，看起来像这样：

<head>
...
<link
            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
            crossorigin="anonymous">
        <script
            src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
            crossorigin="anonymous"></script>
<link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css "/>

</head>

<body>

<header>
                <script>
                    document.addEventListener("DOMContentLoaded", function () {
                        fetch('header.html')
                            .then(response => response.text())
                            .then(data => {
                                document
                                    .querySelector('header')
                                    .innerHTML = data;
                            })
                    })
                </script>
            </header>

.....

script
            src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
            integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
            crossorigin="anonymous"></script>
        <script
            src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
            integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
            crossorigin="anonymous"></script>

</body>

字符串
这是我的header.html

<nav class="navbar navbar-expand-lg">
    <div class="container-fluid">
        <a class="navbar-brand" href="https://">Lorem Ipsum</a>
        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNavDropdown"
            aria-controls="navbarNavDropdown"
            aria-expanded="false"
            aria-label="Toggle navigation">
            <!-- <i class="bi bi-list"></i> -->
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="./#about-us">about</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./#services">services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./#team">team</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./#contacts">contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

型
所以我可以通过点击汉堡图标来打开菜单，但是如果我再次点击它，它会保持打开状态。导航栏在一个单独的文件中会导致这个问题吗？

css

来源：https://stackoverflow.com/questions/77454491/bootstrap-mobile-menu-stays-open-in-my-header-html

2条答案

按热度按时间

bfnvny8b1#

不，navbar在单独的文件中不是问题。
问题是，在index.html中，您加载了两次Bootstrap，因此显然存在一些冲突。
只需加载Bootstrap一次，以及第一个脚本标记中的那个，因为那个脚本标记已经包含了Popper，您将在较低的第二个脚本标记中加载它。
所以，像这样修改你的index.html：

<head>
...
<link
            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
            crossorigin="anonymous">
        <script
            src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
            crossorigin="anonymous"></script>
<link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css "/>

</head>

<body>

<header>
                <script>
                    document.addEventListener("DOMContentLoaded", function () {
                        fetch('header.html')
                            .then(response => response.text())
                            .then(data => {
                                document
                                    .querySelector('header')
                                    .innerHTML = data;
                            })
                    })
                </script>
            </header>

.....

<-- removed scripts from here -->

</body>

字符串
模拟：

BS加载两次：不工作

<head>
...
<link
            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
            crossorigin="anonymous">
        <script
            src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
            crossorigin="anonymous"></script>
<link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css "/>

</head>

<body>

<header>
                <script>
                    const data = ` <nav class="navbar navbar-expand-lg"> <div class="container-fluid"> <a class="navbar-brand" href="https://">Lorem Ipsum</a> <button class="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarNavDropdown"aria-controls="navbarNavDropdown"aria-expanded="false"aria-label="Toggle navigation"> <!-- <i class="bi bi-list"></i> --> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="./#about-us">about</a> </li> <li class="nav-item"> <a class="nav-link" href="./#services">services</a> </li> <li class="nav-item"> <a class="nav-link" href="./#team">team</a> </li> <li class="nav-item"> <a class="nav-link" href="./#contacts">contact</a> </li> </ul> </div> </div> </nav> `;
                    document.addEventListener("DOMContentLoaded", function () {
                        setTimeout(()=>{
                                document
                                    .querySelector('header')
                                    .innerHTML = data;
                            }, 1000);
                    })
                </script>
            </header>

.....

<script
            src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
            integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
            crossorigin="anonymous"></script>
        <script
            src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
            integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
            crossorigin="anonymous"></script>

</body>

型

BS加载一次：工作

<head>
...
<link
            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
            crossorigin="anonymous">
        <script
            src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
            crossorigin="anonymous"></script>
<link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css "/>

</head>

<body>

<header>
                <script>
                    const data = ` <nav class="navbar navbar-expand-lg"> <div class="container-fluid"> <a class="navbar-brand" href="https://">Lorem Ipsum</a> <button class="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarNavDropdown"aria-controls="navbarNavDropdown"aria-expanded="false"aria-label="Toggle navigation"> <!-- <i class="bi bi-list"></i> --> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="./#about-us">about</a> </li> <li class="nav-item"> <a class="nav-link" href="./#services">services</a> </li> <li class="nav-item"> <a class="nav-link" href="./#team">team</a> </li> <li class="nav-item"> <a class="nav-link" href="./#contacts">contact</a> </li> </ul> </div> </div> </nav> `;
                    document.addEventListener("DOMContentLoaded", function () {
                        setTimeout(()=>{
                                document
                                    .querySelector('header')
                                    .innerHTML = data;
                            }, 1000);
                    })
                </script>
            </header>

.....



</body>

型

赞(0）回复(0）举报 2023-11-19

fnatzsnv2#

你的问题可能是当菜单被切换时，它有一些span覆盖在上面，所以当你点击时，你点击的是覆盖，而不是按钮。
您可以通过右键单击打开Chrome上的Devtools并选择Inspect element进行检查。或者您可以通过检查console.log()来尝试查找错误，如果它返回任何错误

赞(0）回复(0）举报 2023-11-19