大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
$(document).ready(function(){
创新互联专注于沂源企业网站建设,成都响应式网站建设公司,成都做商城网站。沂源网站建设公司,为沂源等地区提供建站服务。全流程专业公司,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务
$("#according li").click(function(){
$(this).children("ul").slideToggle();
});
});
你指的是:
这种效果么???
如果是的话可以考虑使用mmenu Jquery插件,很强大。pc,移动都可以用。
使用代码:(第三方资源可以自己现在或者是到我的博客中下载)
!DOCTYPE html
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title mmenu演示 /title
!--需要的第三方包--
link href="font-awesome.min.css" rel="stylesheet" type="text/css"
link href="jquery.mmenu.all.custom.css" rel="stylesheet" type="text/css"
link href="bootstrap.min.css" rel="stylesheet"
script src="jquery.min.js" type="text/javascript"/script
script src="jquery.mmenu.min.all.js"/script
script src="bootstrap.min.js"/script
span style="white-space:pre" /span
script type="text/javascript"
$(document).ready(function() {
$("#main_menu").mmenu({
counters: true,
classes: "mm-light mm-zoom-menu mm-zoom-panels",
searchfield: true,
footer: {
add: true,
content: "Powered by Real @2014"
}
});
});
/script
/head
body
nav class="navbar navbar-default navbar-static-top" role="navigation"
style="margin-bottom: 0"
div class="navbar-head"
div class="navbar-brand"
a href="#main_menu"点击/a
/div
/div
ul class="nav navbar-top-links navbar-right"
li
aaa
/li
li class="dropdown"
a class="dropdown-toggle" data-toggle="dropdown" href="#"
aaa
/a
ul class="dropdown-menu dropdown-user"
li111/li
li class="divider"/li
li222/li
/ul
/li
/ul
/nav
nav id="main_menu" class="noprint"
ul
li
span菜单一/span
div
ul
span style="white-space:pre" /spanlia href=""1/a/li
lia href=""2/a/li
lia href=""3/a/li
/ul
/div
/li
li
span菜单二/span
div
ul
lia href=""1/a/li
/ul
/div
/li
li
span菜单三/span
div
ul
lia href=""1/a/li
span style="white-space:pre" /spanlia href=""2/a/li
lia href=""3/a/li
lia href=""4/a/li
/ul
/div
/li
/ul
/nav
/body
/html
如果你想要的不是这个效果,请贴出效果图。
jquery mobile已经提供了这个功能,直接调用就可以了。
你可以研究下jm的panel