css - 如何在 twitter bootstrap 4 中显示一个可折叠项目?
问题描述
亲爱的朋友和程序员。
以下是我的代码的一部分。实际上,它是我的侧边菜单的一部分。我的代码问题是许多 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>
解决方案
所以..在您的示例中,您应该更仔细地遵循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>
推荐阅读
- kubernetes - 为什么我们需要一个负载均衡器来使用 ingress 暴露 kubernetes 服务?
- c++ - 将从文件读取的字符数组传递给 fopen() 生成错误作为无效参数
- javascript - JavaScript 正则表达式:为什么没有顺序交替?
- python - eylint 输出到变量
- python - 在 Ubuntu 18.04 中安装图形工具时出错
- django - 如何将 td 值从 html 模板传递到我的 views.py
- c# - C# 使用用户控件中的按钮从标签更改文本
- python - 大型数据集上的分类模型
- json - 根据条件从数组中删除对象
- swift - SwiftUI - 使用带有枚举的选择器和提供的值并返回正确的 tag()