帶有隱藏/顯示切換和超棒字體的側邊欄導航

Question

我正在嘗試使用樹形導航構建側邊欄。 我正在使用Bootstrap和jQuery-

我想隱藏嵌套的子菜單。 然后，當您點擊<a class="main-caret"><span class="fa fa-caret-right"></span></a> ，會出現子菜單，並且字體超贊類fa-caret-權利被刪除並換成fa-caret-down。 當您再次單擊鏈接時，我要菜單切換回隱藏以將<a>類更改回插入符號。

我一直在嘗試編寫jQuery函數，但似乎只能使show / hide部分起作用。

有什么想法嗎？

<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

你可以試試這個腳本嗎

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