如何将下拉箭头添加到 Sidenave 引导程序

Question

我是引导程序的新手，我一直在研究侧边导航。不幸的是，引导网站上的文档没有包含太多关于侧导航的内容。我一直在努力，但我无法让箭头显示在下拉选项上。应该在哪里添加？在标签中？

<script>$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});</script>


<span style="font-size:20px;cursor:pointer"><button type="button" class=""btn btn-dark" data-toggle="button" aria- 
pressed="false" autocomplete="off" id="sidebarCollapse">menu</button></span>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">

<div class="sidebar-header">
</div>
<ul class="list-unstyled components">
<li class="active">
<a href="#home" data-toggle="collapse" aria-expanded="false">Media</a>
<ul class="collapse list-unstyled" id="home" data-parent="#sidebar">
<li>
<a href="#">Home 1</a>
</li>
<li>
<a href="#">Home 2</a>
</li>
<li>
<a href="#">Home 3</a>
</li>
</ul>
</li>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">Resources</a>
<ul class="collapse list-unstyled" id="pageSubmenu" data-parent="#sidebar">
<li>
<a href="#">Page 1</a>
</li>
<li>
<a href="#">Page 2</a>
</li>
<li>
<a href="#">Page 3</a>
</li>
</ul>
<a href="#page" data-toggle="collapse" aria-expanded="false"><font color=lightblue>Other</a>
<ul class="collapse list-unstyled" id="page" data-parent="#sidebar">
<li>
<a href="#">other links</a>
</li>
<li>
<a href="#">Page 2</a>
</li>
<li>
<a href="#">Page 3</a>
</li>
</ul>
</ul>
</nav>

Answer 1

Bootstrap 有一个在单击按钮时折叠的属性，您可以使用这个

<span style="font-size:20px;cursor:pointer">
	<button type="button" class="btn btn-dark" data-toggle="collapse" aria-pressed="false" autocomplete="off" id="sidebarCollapse" data-target="#collapse1">menu</button></span>
	   <div id = "collapse1" class="wrapper">
			<ul class="list-unstyled components">
			<li class="active">
				<a href="#home" data-toggle="collapse" aria-expanded="false">Media</a>
				<ul class="collapse list-unstyled" id="home" data-parent="#sidebar">
					<li>
						<a href="#">Home 1</a>
					</li>
					<li>
						<a href="#">Home 2</a>
					</li>
					<li>
						<a href="#">Home 3</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">Resources</a>
				<ul class="collapse list-unstyled" id="pageSubmenu" data-parent="#sidebar">
					<li>
						<a href="#">Page 1</a>
					</li>
					<li>
						<a href="#">Page 2</a>
					</li>
					<li>
						<a href="#">Page 3</a>
					</li>
				</ul>
			</li>
				<a href="#page" data-toggle="collapse" aria-expanded="false"><font color = "lightblue">Other</a>
				<ul class="collapse list-unstyled" id="page" data-parent="#sidebar">
					<li>
						<a href="#">other links</a>
					</li>
					<li>
						<a href="#">Page 2</a>
					</li>
					<li>
						<a href="#">Page 3</a>
					</li>
				</ul>
			</ul>
		</nav>