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>

  • 相关阅读:
    装箱和拆箱
    Foundation--NSDictionary+NSMutableDictionary
    Foundation--NSArray+NSMutableArray
    Foundation--NSString+NSMutableString
    类的三大特性
    python之双引号和三引号
    js原型属性之二 实例.hasOwnProperty(“属性”)
    js构造函数
    git使用两人提交,冲突的解决
    使用mybatis-generator-core-1.3.2生成dao,mapping跟model等
  • 原文地址:https://www.cnblogs.com/wuliwuli/p/5145945.html
Copyright © 2011-2022 走看看