基于JQuery的简单实现折叠菜单代码_Javascript教程-查字典教程网
基于JQuery的简单实现折叠菜单代码
基于JQuery的简单实现折叠菜单代码
发布时间:2016-12-30 来源:查字典编辑
摘要:菜单为二级,初始化时为折叠效果,单击大项标题时展开,显示二级列表。HTML代码如下:复制代码代码如下:服务管理等待提交等待发布正式项目点此新...

菜单为二级,初始化时为折叠效果,单击大项标题时展开,显示二级列表。

HTML代码如下:

复制代码 代码如下:

<body>

<div>

<div>

<img src="images/admin.gif" width="215" height="66" />

</div>

<div id="disp">

</div>

<div>

<img src="images/yuan.gif" /><span>服务管理</span></div>

<div>

<ul>

<li><a href='#'>等待提交</a></li>

<li><a href='#' title=''>等待发布</a></li>

<li><a href='#' title=''>正式项目</a></li>

<li><a href='#' title=''>点此新增</a></li></ul>

</div>

<div>

<img src="images/yuan.gif" /><span>更新流程</span></div>

<div>

<ul>

<li><a href='#'>后台搜索</a></li>

<li><a href='#' title=''>更新流程</a></li>

</div>

<div>

<img src="images/yuan.gif" /><span>FAQ管理</span></div>

<div>

<ul>

<li><a href='#'>等待提交</a></li>

<li><a href='#' title=''>等待发布</a></li>

<li><a href='#' title=''>正式项目</a></li>

<li><a href='#' title=''>点此新增</a></li></ul>

</div>

<div>

<img src="images/yuan.gif" /><span>下载管理</span></div>

<div>

<ul>

<li><a href='#'>等待提交</a></li>

<li><a href='#' title=''>等待发布</a></li>

<li><a href='#' title=''>正式项目</a></li>

<li><a href='#' title=''>点此新增</a></li></ul>

</div>

<div>

<img src="images/yuan.gif" /><span>返回首页</span></div>

</div>

</body>

其中JQUERY脚本,只需简单的几行便可以实现想要的效果。具体代码如下所示:

复制代码 代码如下:

<script language="javascript" type="text/javascript">

$(document).ready(function () {

//将二级菜单设置为不可见

$(".FAQlist").css("display", "none");

//单击一级菜单触发的事件

$(".bartitleFAQ").click(function () {

$(".FAQlist").css("display", "none");//将二级菜单全部设置为不可见

$(this).next(".FAQlist").css("display", "block");//当前一级菜单的二级菜单设置为可见

})

})

</script>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类