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

         具体的业务需求是这样的,加载页面时很普通的一个基础信息页面,当选中人员类别时,根据选中的结果会相应的出现折叠页面,比如说下拉框中有三个选项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函数,你看懂了吗?赶快动手尝试一下吧!