[英]Sidebar Navigation with toggle hide/show and font-awesome
我正在尝试使用树形导航构建侧边栏。 我正在使用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>
你可以试试这个脚本吗
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.