利用JQuery实现点击缩放
不需用到ID，可同时打开多个。
HTML页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.click_icon
{
float:right;
width: 35px;
height: 35px;
position: absolute;
right: 0px;
top: 0px;
background-image:url(http://127.0.0.1/img/FAQ/3.png);
}
.click_icon_open
{
background-image:url(http://127.0.0.1/img/FAQ/2.png);
}
.click_icon:hover
{
cursor: pointer;
}
.wqcontent_joinUs_job_detail
{
display:none;
}
</style>
</head>
<body >
<div class="wqcontent_joinUs_job"><!--A Job-->
<div class="wqcontent_sub_section_title"><!--Job_Title-->
<span>高级经理</span>
<a class="click_icon">
<!--the right icon for click-->
</a>
</div>
<div class="wqcontent_joinUs_job_detail"><!--Job_Detail-->
<div >
<span >岗位职责：</span>
<ol>
<li>
具有一年以上开发经验；</li>
<li>
具有一年以上开发经验；</li>
<li>
具有一年以上开发经验；</li>
<li>
具有一年以上开发经验；</li>
<li>
具有一年以上开发经验；</li>
<li>
具有一年以上开发经验；</li>
</ol>
</div>
<div>
<span >任职要求：</span>
<ol >
<li>
本科（含）以上学历，专业不限，具有良好的沟通能力;</li>
<li>
本科（含）以上学历，专业不限，具有良好的沟通能力;</li>
<li>
本科（含）以上学历，专业不限，具有良好的沟通能力;</li>
<li>
本科（含）以上学历，专业不限，具有良好的沟通能力;</li>
<li>
本科（含）以上学历，专业不限，具有良好的沟通能力;</li>
<li>
本科（含）以上学历，专业不限，具有良好的沟通能力。</li>
</ol>
</div>
</div><!--Job_Detail Over-->
</div><!--A Job Over-->
<script type="text/javascript" src="./jquery-1.6.4.js"></script>
<script language="javascript" src="./join_us.js"></script>
</body>
</html>
join_us.js代码：
(function ($)
{
Drupal.behaviors.batch = { attach: function (context, settings)
{
$(document).ready(function () {
$(".click_icon").click(function () {
if ($(this).hasClass('click_icon_open')) {
$(this).removeClass('click_icon_open');
$(this).parent(".wqcontent_sub_section_title").parent(".wqcontent_joinUs_job").find(".wqcontent_joinUs_job_detail").css('display', 'none');
}
else {
$(this).addClass('click_icon_open');
$(this).parent(".wqcontent_sub_section_title").parent(".wqcontent_joinUs_job").find(".wqcontent_joinUs_job_detail").css('display', 'block');
}
});
});}};
})(jQuery);
具体效果：
收缩：
展开：
作者：Ivan
