gpt4 book ai didi

css - 如何在 twitter bootstrap 4 中显示一个可折叠元素?

转载 作者:太空宇宙 更新时间:2023-11-04 06:41:40 25 4
gpt4 key购买 nike

亲爱的 friend 们和程序员们。

以下是我的部分代码。实际上,它是我侧边菜单的一部分。我的代码问题是许多 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>

最佳答案

所以..在您的示例中,您应该更仔细地遵循 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>

关于css - 如何在 twitter bootstrap 4 中显示一个可折叠元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53699124/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com