如何实现手风琴折叠页面效果

最新推荐文章于 2025-05-23 22:37:05 发布

知也无涯

最新推荐文章于 2025-05-23 22:37:05 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：动态页面

本文链接：https://blog.youkuaiyun.com/gaoying_blogs/article/details/49681557

本文介绍了如何实现手风琴折叠页面效果。通过在HTML中添加JS函数，并利用单引号与双引号的嵌套来构造页面样式。通过onchange事件响应，结合jstl的c:if判断，当页面加载时自动调用JS函数，实现预加载的折叠效果。读者可以跟随步骤尝试自己动手创建手风琴效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

具体的业务需求是这样的,加载页面时很普通的一个基础信息页面,当选中人员类别时,根据选中的结果会相应的出现折叠页面,比如说下拉框中有三个选项1,2,3,选中2时页面会多出一部分页面,当选中其他选项时,该处页面又会折叠回去,隐藏不显示,整个页面的效果很像手风琴,展开再折叠再展开,所以称之为手风琴折叠页面.

今天我们就来具体说一下实现的流程.首先前台页面的js函数:

           function showAccordionDiv(){	
	        //取到对应属性的value值
		var sTypeValue = $("#SType").find("option:selected").text();
		//取到对应属性的key值
		var sTypeCode = $("#SType").val();   

		if(sTypeCode == 2){
				
			var htmlDiv = "";
			htmlDiv += '<div class="main_content_bg" id="showOutCauseDivId">';
			htmlDiv += '<div class="main_content_title"><a id="lblTitle">AAAA</a></div>';
			htmlDiv += '<div class="main_top_bg">';
			htmlDiv += '<div id="employQuery">';
			htmlDiv += '<table width="100%" border="0" cellspacing="1" cellpadding="0" class="module_table_bg"><tr>';
				
			htmlDiv += '<td class="content_title_right" width="10%">BBBB</td>';
			htmlDiv += '<td class="content_content" width="40%">';