Question

在这里使用Bootstrap 4。

我想要发生的是，单击导航栏中的一个链接将切换该链接的内容，同时关闭任何其他打开的链接。我目前所拥有的是每个切换的部分/ div都会显示，除非我在点击下一个链接之前将其切换为隐藏。

我知道我可能需要在打开最后一次单击之前添加一些jQuery以隐藏所有div，但是我无法获得任何与我相关的示例。< / p>

我没有运气这样的事情：

$('.collapse').on('show.bs.collapse', function () {
    $('.collapse').not($(this)).collapse('hide');
})

我的部分问题可能是了解jQuery脚本需要在我的html中。

Codepen在这里：https://codepen.io/anon/pen/MrLgEE

<html lang="en">
<head>
    <title>Hello, World</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>

<nav class="navbar navbar-expand-md bg-dark navbar-dark sticky-top">
    <a class="navbar-brand" data-toggle="collapse" data-target="#home" data-parent="#display_data"><img src="home.png" alt="Logo" style="width:40px;"></a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-toggle="collapse" data-target="#chapter1" data-parent="#display_data">Chapter 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="collapse" data-target="#chapter2" data-parent="#display_data">Chapter 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="collapse" data-target="#chapter3" data-parent="#display_data">Chapter 3</a>
            </li>
        </ul>
    </div>
</nav>
<br/>

<div id="display_data">
    <div id="home" class="collapse toggle show" data-parent="#display_data">
      Ideally, each toggle closes any shown sections so there is only one "chapter" open at a time
    </div>

    <div id="chapter1" class="collapse toggle">
      This is Chapter 1
    </div>

    <div id="chapter2" class="collapse toggle">
      This is Chapter 2
    </div>

    <div id="chapter3" class="collapse toggle">
      This is Chapter 3
    </div>
</div>

</body>
</html>

Answer 1

实际上你的脚本似乎按预期工作了。

但是，您不需要额外的JavaScript来实现您想要的效果。如果在所有可折叠项目上定义data-parent属性，则在显示此可折叠项目时，将关闭指定父项下的所有可折叠元素。这个功能记录在Collapse component。

这是一个工作片段：

＆＃13;

<nav class="navbar navbar-expand-md bg-dark navbar-dark sticky-top">
    <a class="navbar-brand" data-toggle="collapse" data-target="#home" data-parent="#display_data"><img src="home.png" alt="Logo" style="width:40px;"></a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-toggle="collapse" data-target="#chapter1" data-parent="#display_data">Chapter 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="collapse" data-target="#chapter2" data-parent="#display_data">Chapter 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="collapse" data-target="#chapter3" data-parent="#display_data">Chapter 3</a>
            </li>
        </ul>
    </div>
</nav>
<br/>

<div id="display_data">
    <div id="home" class="collapse toggle show" data-parent="#display_data">
      Ideally, each toggle closes any shown sections so there is only one "chapter" open at a time
    </div>

    <!-- Note `data-parent="#display_data"` on these tags too -->
    <div id="chapter1" class="collapse toggle" data-parent="#display_data">
      This is Chapter 1
    </div>

    <div id="chapter2" class="collapse toggle" data-parent="#display_data">
      This is Chapter 2
    </div>

    <div id="chapter3" class="collapse toggle" data-parent="#display_data">
      This is Chapter 3
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

＆＃13;

无法通过Bootstrap 4将div与data-parent切换

1 个答案: