如何在 twitter bootstrap 4 中显示一个可折叠项目？答案

【问题标题】：How can I show one collapsible item in twitter bootstrap 4?如何在 twitter bootstrap 4 中显示一个可折叠项目？
【发布时间】：2019-05-10 23:12:20
【问题描述】：

亲爱的朋友和程序员。

以下是我的代码的一部分。实际上，它是我的侧边菜单的一部分。我的代码问题是许多 Bootstrap 用户遇到的常见问题。我希望只有一个可折叠项目在单击后显示，而另一个先前打开的项目将关闭。提前致谢。

<ul>
    <li class="link">
        <a href="index.php">
            <span class="fas fa-home" aria-hidden="true"></span>
            <span class="d-none d-sm-inline">Home</span>
        </a>
    </li>

    <li class="link">
        <a href="#collapse-post"  data-toggle="collapse" aria-expanded="false" aria-controls="collapse-post">
            <span class="fas fa-paper-plane" aria-hidden="true"></span>
            <span class="d-none d-sm-inline">Operation</span>
        </a>
        <ul class="collapse collapse-li-border" id="collapse-post">
            <li><a href="#">Delete</a></li>
            <li><a href="#">Create</a></li>

        </ul>
    </li>


    <li class="link">
        <a href="#collapse-edari"  data-toggle="collapse" aria-expanded="false" aria-controls="collapse-edari">
            <span class="fas fa-bullseye" aria-hidden="true"></span>
            <span>Office</span>
        </a>
        <ul class="collapse collapse-li-border" id="collapse-edari">
            <li><a href="#">Word</a></li>
            <li><a href="#">Access</a></li>
            <li><a href="#">Powerpoint</a></li>

        </ul>
    </li>
</ul>

【问题讨论】：

嗨。也请包括你的 css，这样我们就可以做一些事情了。
嗨 Ludovit，主要的 css 框架是 bootstrap 4。我还需要发送其他什么吗？
阅读文档和use the Collapse accordion。

标签： css twitter-bootstrap collapse

【解决方案1】：

所以.. 在您的示例中，您应该更仔细地遵循dropdown component of bootstrap 的文档。在这些情况下不完全使用折叠组件。我对您的代码进行了一些更改，但您需要根据您的具体情况对其进行调整。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.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>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<ul>
    <li class="link">
        <a href="index.php">
            <span class="fas fa-home" aria-hidden="true"></span>
            <span>Home</span>
        </a>
    </li>

    <li class="link">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
            <span class="fas fa-paper-plane" aria-hidden="true"></span>
            <span>Operation</span>
        </a>
        <ul class="dropdown-menu" id="collapse-post">
            <li class="dropdown-item"><a href="#">Delete</a></li>
            <li class="dropdown-item"><a href="#">Create</a></li>

        </ul>
    </li>


    <li class="link">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
            <span class="fas fa-bullseye" aria-hidden="true"></span>
            <span>Office</span>
        </a>
        <ul class="dropdown-menu" id="collapse-edari">
            <li class="dropdown-item"><a href="#">Word</a></li>
            <li class="dropdown-item"><a href="#">Access</a></li>
            <li class="dropdown-item"><a href="#">Powerpoint</a></li>

        </ul>
    </li>
</ul>

【讨论】：