Блог

Я новичок в bootstrap, и я работал над sidenav. К сожалению, документация на веб-сайте bootstrap не содержит много информации о боковой навигации. Я работал над этим, но я не могу заставить стрелку отображаться в раскрывающихся опциях. Где это должно быть добавлено? В теге a?

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

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