zoukankan      html  css  js  c++  java
  • jquery 点击显示隐藏的三种方法

    jquery点击显示隐藏的三种方法,从复杂到简单。使用jquery需要引用jquery库,如右所示<script src="jquery-1.11.3.min.js"type="text/javascript"></script>。

    旁边按钮随着收缩展开发生状态变化,展开+变—,收缩—变+。

    收缩效果:

       

    展开效果:

    一、HTML结构(盗用网上的)

    <body>

    <!-- 收缩展开效果 -->
    <li class="box">
    <h1>收缩展开效果<span class="shrinkBox_open "></span></h1>
    <p class="text">
    1<br />
    2<br />
    3<br />
    4<br />
    5<br />
    </p>
    </li>
    <br />
    <div class="box">
    <h1>收缩展开效果<span class="shrinkBox_open "></span></h1>
    <div class="text">
    1<br />
    2<br />
    3<br />
    4<br />
    5<br />
    5<br />
    </div>
    </div>
    <br>
    </body>

    二、css渲染

    <style>
    .text{
    display:none;
    }
    .shrinkBox_open{
    display:block;
    background:url(shrinkBox_open.png) no-repeat;
    height:25px;
    background-size:25px;
    position:relative;
    top:-26px;
    left:90%;
    }
    .shrinkBox_close{
    background:url(shrinkBox_close.png) no-repeat;
    background-size:25px;
    }
    </style>

     三、JS文件

     1、该方法调用animate动画,完成展开收缩效果。利用addClass与removeClass动态添加样式,进行+与-的切换。

    <script type="text/javascript">
    // 收缩展开效果
    $(document).ready(function(){
    $(".box h1").click(function(){
    $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "");
    if($(this).find(".shrinkBox_open").hasClass("shrinkBox_close"))
    {$(this).find(".shrinkBox_open").removeClass("shrinkBox_close");}
    else
    { $(this).find(".shrinkBox_open").addClass("shrinkBox_close");}
    });


    });

    2、利用toggleClass动态添加样式,进行+与-的切换

    <script type="text/javascript">
    // 收缩展开效果
    $(document).ready(function(){
    $(".box h1").click(function(){
    $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "");
    $(this).find(".shrinkBox_open").toggleClass("shrinkBox_close");
    });


    });

    3.调用slideToggle(),完成展开收缩效果

    <script type="text/javascript">

    $(document).ready(function(){
    $(".box h1").click(function(){
    $(this).next(".text").slideToggle();
    $(this).find(".shrinkBox_open").toggleClass("shrinkBox_close");
    });


    });
    </script>

  • 相关阅读:
    【算法笔记】B1020 月饼
    JZOJ 3412. 【NOIP2013模拟】KC看星
    JZOJ 3517. 空间航行
    JZOJ 3515. 软件公司
    JZOJ 3514. 最小比例
    JZOJ 3490. 旅游(travel)
    luogu P3178 [HAOI2015]树上操作
    JZOJ 3427. 归途与征程
    JZOJ 3426. 封印一击
    JZOJ 3425. 能量获取
  • 原文地址:https://www.cnblogs.com/wuliwuli/p/5145945.html
Copyright © 2011-2022 走看看