java模版需要三级菜单，用到js+css

小龙人_Feng 2017-06-08 09:33:54

这是从网上找到的网页模版，因为项目需要，要添加三级折叠菜单，请大神帮忙解答一下，急！
JSP代码如下：
<li class="submenu">
<a href="#">
<i class="icon icon-stop"></i>
<span>科研项目</span>
<span class="label label-important">5</span>
</a>
<ul>
<li><a class="menu_a" link="gallery.html"><i class="icon icon-caret-right"></i>纵向项目</a>
<%--三级菜单位置--%>
<ul>
<li><a class="menu_a" link="gallery.html"><i class="icon icon-caret-right"></i>纵向项目</a></li>
<li><a class="menu_a" link="calendar.html"><i class="icon icon-caret-right"></i>横向项目</a></li>
<li><a class="menu_a" link="invoice.html"><i class="icon icon-caret-right"></i>成果转化项目</a></li>
</ul>
</li>
<li><a class="menu_a" link="calendar.html"><i class="icon icon-caret-right"></i>横向项目</a></li>
<li><a class="menu_a" link="invoice.html"><i class="icon icon-caret-right"></i>成果转化项目</a></li>
</ul>
</li>

JS代码：
$('.menu_a').click(function(e){
$("#iframe-main").attr("src", $(this).attr('link'));

$(".menu_a").parent('li').removeClass('active');

$(this).parent('li').addClass('active');
});

...全文

210 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

Oliver尹 2017-06-09

打赏
举报

引用 2 楼 FengDuidui 的回复:

[quote=引用 1 楼萌萌哒的小米丶的回复:]折叠？jq中的show,hide,animate,不都是或收起或隐藏的么

可以帮忙写一下么？我不太懂前台[/quote] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-1.11.0.min.js"></script> <style> .submenu{ display: block; } </style> <script> $(function(){ $("#one_title").click(function(){ $("#one").animate({height: 'toggle', opacity: 'toggle'}, 300); }); $("#two_title").click(function(){ $("#two").animate({height: 'toggle', opacity: 'toggle'}, 300); }); }); </script> </head> <body> <li class="submenu"> <a href="#" id="one_title"> <i class="icon icon-stop"></i> <span>科研项目</span> <span class="label label-important">5</span> </a> <ul id="one"> <li><a class="menu_a" id="two_title" link="gallery.html"><i class="icon icon-caret-right"></i>纵向项目</a> <%--三级菜单位置--%> <ul id="two"> <li><a class="menu_a" link="gallery.html"><i class="icon icon-caret-right"></i>纵向项目</a></li> <li><a class="menu_a" link="calendar.html"><i class="icon icon-caret-right"></i>横向项目</a></li> <li><a class="menu_a" link="invoice.html"><i class="icon icon-caret-right"></i>成果转化项目</a></li> </ul> </li> <li><a class="menu_a" link="calendar.html"><i class="icon icon-caret-right"></i>横向项目</a></li> <li><a class="menu_a" link="invoice.html"><i class="icon icon-caret-right"></i>成果转化项目</a></li> </ul> </li> </body> </html>

小龙人_Feng 2017-06-09