首页 文章

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

提问于
浏览 次
0

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

我想隐藏嵌套的子菜单 . 然后，当您单击 <a class="main-caret"><span class="fa fa-caret-right"></span></a> 时，将出现子菜单，并且将删除字体 - 真棒类fa-caret-right并将其换成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>
javascript jquery list dom navigation

1 回答

  • 0

    你能试试这个剧本吗？

    $(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>
    回复于

相关问题