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

具体的业务需求是这样的,加载页面时很普通的一个基础信息页面,当选中人员类别时,根据选中的结果会相应的出现折叠页面,比如说下拉框中有三个选项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%">';
			htmlDiv += '<input type="text" hidden="hidden" value="${personRetireInfo.SGuid }" 

name="personRetireInfo.SGuid" id="SGuid" class="content_content_input"/>';
			htmlDiv += '<input type="text" hidden="hidden" value="${personRetireInfo.SPersonGuid }" 

name="personRetireInfo.SPersonGuid" id="SPersonGuid" class="content_content_input"/>';
			htmlDiv += '<input type="text" value="${personRetireInfo.SDocGuid }" name="personRetireInfo.SDocGuid" 

id="SDocGuid" class="content_content_input"/></td>';

			htmlDiv += '<td class="content_title_right">CCCC</td>';
			htmlDiv += '<td class="content_content" >';
			htmlDiv += '<select id="isEarlierRetire" class="content_content_select" 

name="personRetireInfo.isEarlierRetire">';
			htmlDiv += '<zw:basedictlist itemCode="2007" selectValue="${personRetireInfo.isEarlierRetire 

}"></zw:basedictlist>';
			htmlDiv += '</select></td></tr><tr>';

			htmlDiv += '<td class="content_title_right">DDDDD</td>';
			htmlDiv += '<td class="content_content">';
			htmlDiv += '<select id="SRetireType" class="content_content_select" name="personRetireInfo.SRetireType" 

style="width: 70%;">';
			htmlDiv += '<zw:basedictlist itemCode="133" selectValue="${personRetireInfo.SRetireType 

}"></zw:basedictlist>';
			htmlDiv += '</select>';

			htmlDiv += '<td class="content_title_right"></td>';
			htmlDiv += '<td class="content_content" >';
			htmlDiv += '</td>';

			htmlDiv += '</td></tr><tr>';
			htmlDiv += '<td class="content_title_right">EEEE</td>';
			htmlDiv += '<td class="content_content" colspan="3">';
			htmlDiv += '<input id="DRetireDate" type="text" readonly="readonly" name="personRetireInfo.DRetireDate" class="Wdatelong" onfocus="WdatePicker()" value="<fmt:formatDate value="${personRetireInfo.DRetireDate}" pattern="yyyy-MM-dd"/>"/></td></tr><tr>';

			htmlDiv += '<td class="content_title_right">FFFF</td>';
			htmlDiv += '<td class="content_content">';
			htmlDiv += '<input type="text" id="SWorkingAge" name="personRetireInfo.SWorkingAge" size="42" maxlength="40" value="${personRetireInfo.SWorkingAge }" class="content_content_input"/>';

			htmlDiv += '<td class="content_title_right">GGGG</td>';
			htmlDiv += '<td class="content_content">';
			htmlDiv += '<input type="text" name="personRetireInfo.SContinueWorkingAge" size="42" maxlength="40" value="${personRetireInfo.SContinueWorkingAge }" class="content_content_input"/>';
			htmlDiv += '</td></tr><tr>';

			htmlDiv += '<td class="content_title_right">HHHH</td>';
			htmlDiv += '<td class="content_content">';
			htmlDiv += '<input id="DDieDate" type="text" readonly="readonly" name="personRetireInfo.DDieDate" class="Wdatelong" onfocus="WdatePicker()" value="<fmt:formatDate value="${personRetireInfo.DDieDate}" pattern="yyyy-MM-dd"/>"/></td>';	

			htmlDiv += '<td class="content_title_right">IIII</td>';
			htmlDiv += '<td class="content_content">';
			htmlDiv += '<select id="SEndDate" class="content_content_select" name="personRetireInfo.SEndDate">';
			htmlDiv += '<zw:basedictlist itemCode="134" selectValue="${personRetireInfo.SEndDate }"></zw:basedictlist>';
			htmlDiv += '</select></td></tr><tr>';

			htmlDiv += '<td class="content_title_right">JJJJ</td>';
			htmlDiv += '<td class="content_content" colspan="3">';
			htmlDiv += '<input id="SRetirePlace" type="text" value="${personRetireInfo.SRetirePlace }" name="personRetireInfo.SRetirePlace" size="42" maxlength="40" value="" class="content_content_input" style="width: 40%;" /></td></tr>';
			htmlDiv += '</table></div></div></div>';

			$("#otherDiv").append(htmlDiv);
		}else{
			$("#showAccordionDivId").remove();
		}
	}

在html标签中响应js函数:

<span style="font-size:14px;"><td class="content_title_right">选中哪个：</td>
<td class="content_content">
    <select id="SPersonType" name="personBaseInfo.SPersonType" class="content_content_select" onchange="showAccordionDiv();" >
        <zw:basedictlist itemCode="<%=Constants.S_PERSON_TYPE %>" selectValue="${personBaseInfo.SPersonType}"></zw:basedictlist>	<c:if test="${personBaseInfo.SPersonType=='2'}">
            <script type="text/javascript">
                showAccordionDiv();
            </script>
        </c:if>
    </select>
</td></span>

这样,我们就可以通过拼页面的形式来加载出手风琴的效果,是不是很神奇?其实整个过程的实现流程非常简单,关键点在于拼js函数拼页面时,外层都是单引号,内层才是双引号,你可以先在页面中写出你要的样式,然后真个复制进js函数中,再用双引号和单引号分别装饰好,就可以很容易的出现你想要的效果了,然后在html标签中加一个onchange事件响应.我之所以在下面还加了一个jstl表达式的c:if判断,是当页面加载时,如果下拉框中已经加载了响应的值,则调用我们写的js函数,你看懂了吗?赶快动手尝试一下吧!

版权声明：本文为博主原创文章，未经博主允许不得转载。