带有隐藏/显示切换和超棒字体的侧边栏导航

Question

I'm trying to build a sidebar with a tree navigation. I'm using Bootstrap and jQuery-

I want to hide the nested submenu(s). Then when you click on <a class="main-caret"><span class="fa fa-caret-right"></span></a> , the submenu appears and the font-awesome class fa-caret-right gets removed and swapped for fa-caret-down. When you click on the link again, I want to menu to toggle back to hide and have the <a> class change back to caret-down.

I've been trying to write a jQuery function but I only seem to get the show/hide part to work.

Thoughts?

<ul class="list-unstyled sidebar-nav">
  <li><a href="#">Applying for Aid</a></li>
  <li><a class="main-caret"><span class="fa fa-caret-right"></span></a> <a href="#">Graduates</a>
    <ul class="sidebar-submenu">
      <li><a href="#"><span class="fa fa-caret-right"></span></a> <a href="#">Graduates</a></li>
      <li><a href="#"><span class="fa fa-caret-right"></span> Graduates</a></li>
      <li><a href="#"><span class="fa fa-caret-right"></span> Graduates</a></li>
    </ul>
  </li>


  <li><a href="#"><span class="fa fa-caret-right"></span> College of Professional Studies</a></li>
  <li><a href="#"><span class="fa fa-caret-right"></span> School of Law</a></li>
  <li><a href="#"><span class="fa fa-caret-right"></span> Veterans</a></li>
</ul>

Answer 1

Could you try this scripts

 $(function() { $('.sidebar-nav li a').click(function(e) { var ul = $(this).parent().find('ul'); if (ul.length !== 0 ) { $(this).toggleClass('open').parent().find('ul').slideToggle(); } else { window.location.href = $(this).attr('href'); } e.preventDefault(); }); }); 

 ul.sidebar-nav {list-style:none;} ul.sidebar-nav li ul { display:none; } ul.sidebar-nav li a {} ul.sidebar-nav li a span.fa-caret-right { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } ul.sidebar-nav li a.open span.fa-caret-right { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="list-unstyled sidebar-nav"> <li><a href="#">Applying for Aid</a></li> <li><a href="#" class="main-caret"><span class="fa fa-caret-right"></span> Graduates</a> <ul class="sidebar-submenu"> <li><a href="#"><span class="fa fa-caret-right"></span>Graduates</a></li> <li><a href="#"><span class="fa fa-caret-right"></span> Graduates</a></li> <li><a href="#"><span class="fa fa-caret-right"></span> Graduates</a></li> </ul> </li> <li><a href="#"><span class="fa fa-caret-right"></span> College of Professional Studies</a></li> <li><a href="#"><span class="fa fa-caret-right"></span> School of Law</a></li> <li><a href="#"><span class="fa fa-caret-right"></span> Veterans</a></li> </ul>