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
  • 相关阅读:
    转载:Python十分钟入门
    Think Python: How to Think Like a Computer Scientist
    LeetCode(34):搜索范围
    LeetCode(33):搜索旋转排序数组
    LeetCode(32):最长有效括号
    LeetCode(31): 下一个排列
    LeetCode(30):与所有单词相关联的字串
    LeetCode(29): 两数相除
    LeetCode(28): 实现strStr()
    LeetCode(27): 移除元素
  • 原文地址:https://www.cnblogs.com/oneivan/p/2248821.html
Copyright © 2011-2022 走看看