Question

我正在尝试使用树导航构建侧边栏。我正在使用Bootstrap和jQuery -

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

你可以尝试这个脚本吗？

＆＃13;

$(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(); 
  
});

});

＆＃13;

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);  
}

＆＃13;

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

＆＃13;

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

1 个答案: