如何添加下拉箭頭到sidenave bootstrap

Question

我是bootstrap的新手，我一直在做sidenav。 不幸的是，bootstrap網站上的文檔並沒有包含太多關於側面導航的內容。 我一直在努力，但我不能讓箭頭出現在下拉選項上。 它應該添加到哪里？ 在一個標簽？

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