利用JQuery实现点击缩放

最新推荐文章于 2024-07-10 02:59:29 发布

weixin_30699463

最新推荐文章于 2024-07-10 02:59:29 发布

阅读量1.7k

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/oneivan/archive/2011/11/14/2248821.html

版权

不需用到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);