zoukankan      html  css  js  c++  java
  • 利用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
    个人网站:http://www.IvanBy.com
  • 相关阅读:
    事件(三):事件对象
    事件(二):事件处理程序
    事件(一):事件流
    nginx里面的rewrite配置
    详解 CSS 居中布局技巧
    jQuery 效率提升建议
    web的攻击技术
    前端优化点总结
    深入理解递归和闭包
    创建对象
  • 原文地址:https://www.cnblogs.com/oneivan/p/2248821.html
Copyright © 2011-2022 走看看