html - 如何将下拉箭头添加到 sidenave 引导程序

Question

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

<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>