个人中心
gpt4 book ai didi

html - 我最初如何在我的单页应用程序中隐藏 Bootstrap Accordion 内容？

转载 作者：行者123 更新时间：2023-11-28 17:01:01 25 4
gpt4 key购买 nike

我正在为 ESP32 构建单页应用程序。我认为将整个站点放在一个文档中会很好，因为内容不多。

我从 bootstrap 4.1.2 崩溃类开始。它正在工作，但不幸的是，有些东西我无法关闭。

因为总是只显示一个内容，所以应该不可能通过点击相应的导航链接来隐藏它，应该只能通过不同的导航链接与其他内容切换。

那我该怎么做呢？

<!doctype html>
<html lang="en">

<head>
    <title>LOGO</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<!-- A vertical navbar -->

<body>
    <nav class="navbar navbar-expand-md navbar-dark bg-primary">
        <div class="container justify-content-center">
            <a class="navbar-brand abs " href="#">
                <span class="menu-collapsed">LOGO</span>
            </a>
            <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse flex-grow text-center" id="navbarNavDropdown">
                <ul class="nav navbar-nav flex-fill mx-auto flex-nowrap">
                    <li class="nav-item">

                        <a class="nav-link" data-toggle="collapse" data-target="#collapseOne, .navbar-collapse.show"
                            aria-expanded="true" aria-controls="collapseOne" href="#">TEST1</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="collapse" data-target="#collapseTwo, .navbar-collapse.show"
                            aria-expanded="false" aria-controls="collapseTwo" href="#">TEST2</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" role="button" data-toggle="collapse" data-target="#collapseThree, .navbar-collapse.show"
                            aria-expanded="false" aria-controls="collapseThree" href="#">TEST3</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="fa fa-cog"></i>
                            <span>Settings</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container" id="accordionExample">
        <div class="row">
            <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                <div class="card-body active">
                    1111111111111111111111111111111111111
                </div>
            </div>
        </div>
        <div class="row">
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                <div class="card-body">
                    222222222222222222222222222222222222
                </div>
            </div>
        </div>
        <div class="row">
            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                <div class="card-body">
                    333333333333333333333333333333333333
                </div>
            </div>
        </div>

</body>

</html>

最佳答案

只需从#collapseOne 中删除“show”类 - 我认为这会解决您的问题...

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link href="./css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="./css/fontawesome.css" rel="stylesheet">

        <nav class="navbar navbar-expand-md navbar-dark bg-primary">
            <div class="container justify-content-center">
                <a class="navbar-brand abs " href="#">
                    <span class="menu-collapsed">LOGO</span>
                </a>
                <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse flex-grow text-center" id="navbarNavDropdown">
                    <ul class="nav navbar-nav flex-fill mx-auto flex-nowrap">
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="collapse" data-target="#collapseOne, .navbar-collapse.show" aria-expanded="true"
                                aria-controls="collapseOne" href="#">TEST1</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="collapse" data-target="#collapseTwo, .navbar-collapse.show" aria-expanded="false"
                                aria-controls="collapseTwo" href="#">TEST2</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"  role="button" data-toggle="collapse" data-target="#collapseThree, .navbar-collapse.show" aria-expanded="false"
                                aria-controls="collapseThree" href="#">TEST3</a>
                        </li>
                         <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fa fa-cog"></i>
                                <span>Settings</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

        </nav>

        <div class="container" id="accordionExample">
            <div class="row">
                <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                    <div class="card-body active">
                       1111111111111111111111111111111111111
                    </div>
                </div>
            </div>
            <div class="row">
                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                    <div class="card-body">
                        222222222222222222222222222222222222
                    </div>
                </div>
            </div>
            <div class="row">
                <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                    <div class="card-body">
                        333333333333333333333333333333333333
                    </div>
                </div>
            </div>


            <script src="./js/jquery-3.3.1.slim.min.js" crossorigin="anonymous"></script>
            <script src="./js/popper.min.js" crossorigin="anonymous"></script>
            <script src="./js/bootstrap.min.js" crossorigin="anonymous"></script>
            <script src="./js/fontawesome.js" crossorigin="anonymous"></script>

关于html - 我最初如何在我的单页应用程序中隐藏 Bootstrap Accordion 内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52987516/

25 4 0
文章推荐： html - 元素 CSS 中的重复规则
文章推荐： javascript - Kendo Grid 可编辑弹出窗口是否有某种 IsChanged 事件？
文章推荐： python - 当 N 大于组数时 nlargest(N) 的行为？
文章推荐： javascript - 如何围绕 Web Workers API 编写 Promise 包装器？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com