Question

我正在为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>

Answer 1

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

<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>

Answer 2

顺带一提，我不得不使用带有data-toggle =“ tab”的药丸。只是折叠菜单并不像第一个帖子那样将所有项目垂直放置。但这仅仅是一个设计缺陷。感谢您的帮助：）

<!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">

                <div class="nav nav-pills  justify-content-center bg-primary" id="pills-tab" role="navigation" style="margin-top:2.5%;">

                    <a class="nav-item nav-link text-light active " id="pills-home-tab" data-toggle="tab" href="#pills-home"
                        role="tab" aria-controls="pills-home" aria-selected="true">
                        <p class="div" data-toggle="collapse" data-target=".navbar-collapse.show" aria-expanded="false"
                            aria-controls="collapseThree" href="#">Test1
                        </p>
                    </a>
                    <a class="nav-item nav-link text-light" id="pills-profile-tab" data-toggle="tab" href="#pills-profile"
                        role="tab" aria-controls="pills-profile" aria-selected="false">
                        <p class="div" data-toggle="collapse" data-target=".navbar-collapse.show" aria-expanded="false"
                            aria-controls="collapseThree" href="#">Test2
                        </p>
                    </a>
                    <a class="nav-item nav-link text-light" id="pillsv-contact-tab" data-toggle="tab" href="#pills-contact"
                        role="tab" aria-controls="pills-contact" aria-selected="false">
                        <p class="div" data-toggle="collapse" data-target=".navbar-collapse.show" aria-expanded="false"
                            aria-controls="collapseThree" href="#">Test3
                        </p>
                    </a>
                </div>
            </div>
    </nav>

    <div class="tab-content" id="pills-tabContent">
        <div class="tab-pane active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
            111111111111111111111111111111111111111111
        </div>
        <div class="tab-pane" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
            222222222222222222222222222222222222222222
        </div>
        <div class="tab-pane" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
            333333333333333333333333333333333333333333
        </div>
    </div>

    <footer class="fixed-bottom">
        Facebook, Twitter usw Symbole
    </footer>

</body>

</html>

最初如何在我的单页应用程序中隐藏Bootstrap手风琴内容？

2 个答案: