jquery制作折叠式菜单（Accordion）

最新推荐文章于 2022-05-27 18:52:25 发布

南京_杨文

最新推荐文章于 2022-05-27 18:52:25 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： J2EE技术 Web技术

本文链接：https://blog.youkuaiyun.com/japanstudylang/article/details/30258397

J2EE技术同时被 2 个专栏收录

84 篇文章

订阅专栏

Web技术

43 篇文章

订阅专栏

本文介绍了如何利用jQuery实现折叠式菜单（Accordion）效果。这种菜单在点击主菜单项时，会滑动显示对应的二级菜单，并自动隐藏其他子菜单，其交互体验类似于手风琴。

1. 制作折叠式菜单（Accordion）

折叠式菜单是和Tab面板一样流行的高级网页元素，它是一种二级菜单，当点击某个主菜单项时，就会以滑动的方式展开它下面的二级菜单，同时自动收缩隐藏其他主菜单项的二级菜单，如图所示。因此折叠式菜单有一个很好听的英文名叫“Accordion”（手风琴），它的折叠方式是不是有点像在拉手风琴呢？

<scripttype="text/javascript" src="js/jquery-1.9.0.js"></script>

<scriptlanguage="javascript" type="text/javascript">

$(document).ready(function(){

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

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

$(".admintext11").css("color","red");

$(".closelist").css("color","green");

$(".FAQlist").css("cursor","pointer");

$(".admintext11").css("cursor","pointer");

$(".closelist").css("cursor","pointer");

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

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

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

});

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

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

if ($(this).next(".FAQlist").css("display")== "none") {

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

} else{

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

}

});

});

</script>

<body>

<divclass="mainleftFAQ">

<divclass="category">=============层叠菜单演示==============</div>

<divclass="bartitleFAQ">

<imgsrc="images/yuan.png" /> <span class="closelist"title="点击">关闭所有下拉菜单</span>

</div>

<divid="disp"></div>

<divclass="bartitleFAQ">

<imgsrc="images/yuan.png" /> <span class="admintext11"title="点击">服务管理</span>

</div>

<divclass="FAQlist">

<ul>

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

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

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

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

</ul>

</div>

<divclass="bartitleFAQ">

<imgsrc="images/yuan.png" /> <span class="admintext11"title="点击">更新流程</span>

</div>

<divclass="FAQlist">

<ul>

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

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

</ul>

</div>

<divclass="bartitleFAQ">

<imgsrc="images/yuan.png" /> <span class="admintext11"title="点击">FAQ管理</span>

</div>

<divclass="FAQlist">

<ul>

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

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

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

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

</ul>

</div>

<divclass="bartitleFAQ">

<imgsrc="images/yuan.png" /> <span class="admintext11"title="点击">下载管理</span>

</div>

<divclass="FAQlist">

<ul>

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

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

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

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

</ul>

</div>

</div>

</body>