侧栏导航与切换隐藏/显示和字体真棒

Question

我试图建立一个树导航边栏。我正在使用Bootstrap和jQuery-

我想隐藏嵌套的子菜单。然后，当你点击 <a class="main-caret"><span class="fa fa-caret-right"></span></a>时，子菜单出现，字体超赞类fa-caret-right被移除并换成 fa-caret-down。当你再次点击该链接时，我想要菜单切换回隐藏并让<a>类重新变成插页。

我一直在试图写一个jQuery函数，但我似乎只能看到显示/隐藏部分工作。

想法？

<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(); \t 
 
    } 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); 
 
\t -moz-transform: rotate(0deg); 
 
\t -o-transform: rotate(0deg); 
 
\t transform: rotate(0deg); 
 
} 
 
ul.sidebar-nav li a.open span.fa-caret-right { 
 
    -webkit-transform: rotate(-90deg); 
 
\t -moz-transform: rotate(-90deg); 
 
\t -o-transform: rotate(-90deg); 
 
\t 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>