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

【问题标题】：Sidebar Navigation with toggle hide/show and font-awesome带有切换隐藏/显示和字体真棒的侧边栏导航
【发布时间】：2017-02-12 17:17:18
【问题描述】：

我正在尝试构建一个带有树形导航的侧边栏。我正在使用 Bootstrap 和 jQuery-

我想隐藏嵌套的子菜单。然后当你点击 <a class="main-caret"><span class="fa fa-caret-right"></span></a>，子菜单出现，字体真棒类 fa-caret-right 被删除并换成 fa-插入符号。当您再次单击该链接时，我想通过菜单切换回隐藏并将 <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>

【问题讨论】：

标签： javascript jquery list dom navigation

【解决方案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>

【讨论】：