jQuery 特效【文本框折叠隐藏,展开显示】

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="js/Jquery/jquery-1.7.1.min.js"></script>

    <style type="text/css">
        #thc-count
        {
            width: 400px;
            margin: 0 auto;
            border: 2px solid black;
        }

        .thc-count-top
        {
            width: 380px;
            line-height: 40px;
            height: 40px;
            border-bottom: 1px solid #ae9f9f;
            margin: 10px;
            overflow: hidden;
            /*text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;*/
        }
    </style>

</head>
<body>
    <form id="form1" runat="server">
        <div id="thc-count">

            <div class="thc-count-top">
                <p>1</p>

            </div>
            <div class="thc-count-top">
                <p>1</p>
                <p>2</p>

            </div>
            <div class="thc-count-top">
                <p>1</p>
                <p>2</p>
                <p>3</p>
                <p>4</p>

            </div>
            <div class="thc-count-top">
                <p>1</p>
                <p>2</p>
                <p>3</p>
                <p>4</p>
                <p>5</p>
                <p>6</p>
            </div>

        </div>

    </form>
</body>
</html>
<script type="text/javascript">

    $(".thc-count-top").toggle(
    function () {

        var hei = $(this).css(‘height‘, ‘auto‘).height();//div 默认用文字撑起来的高度

        $(this).css(‘height‘, ‘50px‘);//div 最小的高度

        $(this).animate({ height: hei }, 500)
    },
    function () { $(this).animate({ height: "50" }, 500) });

</script>

文本框折叠,展示

var hei = $("#div1").css(‘height‘, ‘auto‘).height();

-- 获取 div1 的 默认高度(内容撑起来的高度)

时间: 2024-10-17 13:54:24

jQuery 特效【文本框折叠隐藏,展开显示】的相关文章

JS控制文本框中的密码显示/隐藏功能

<html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <style> body,input{font:menu} </style> </head> <body> <form method="POST" action="addcheck.asp" name="forms&

jQuery监控文本框事件并作相应处理的方法

本文实例讲述了jQuery监控文本框事件并作相应处理的方法.分享给大家供大家参考.具体如下: //事情委托 $(document)  .on('input propertychange', '#query', function(){   var input = $(this).val();   show(input);  });  var show = function(txt){   var info = '监听:<b>' + txt + '</b><br /><

用Jquery控制文本框只能输入数字和字母

只为成功找方法,不为失败找借口! 用Jquery控制文本框只能输入数字和字母 在公司开发WinForm项目时,发现公司自主研发的textbox控件非常强大,可以实现"只能输入数字"."只能输入字母"和"只能输入数字和字母"的三种输入限制,这样就可以精确控制用户输入的内容范围,让"用户永远没有办法输入限定的内容范围之外的其他内容",也就是"用户即使想犯错误也没有机会",这种限制控件输入的方式给了我很大的启发,

js/jquery获取文本框的值与改变文本框的值

我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 <script>function get1(){ document.getElementById("txtbox2").value=document.getElementById("txtbox").value; //获取文本框1的值,并赋值给文本框2}</script> <table width="500" border="0"

jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮

在移动互联网时代,HTML5开发越来越收到欢迎.于是各种HTML5的框架都出来了.由于对于jquery的熟悉,jquery mobile 为多数人选择学习的对象.我也是众多追求者之一.最近一直在开发jQuery Mobile的相关应用.并颇有心得,再这里和大家一起分享一下. 好了,我们之间上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>

jquery限制文本框只能输入数字、JQuery 限制文本框只能输入数字和小数点

/*JQuery 限制文本框只能输入数字及小数点 */ <script> $(function(){ /*JQuery 限制文本框只能输入数字*/ $("#id").keyup(function(){ $(this).val($(this).val().replace(/\D|^0/g,'')); }).bind("paste",function(){  //CTR+V事件处理 $(this).val($(this).val().replace(/\D|

jquery 限制文本框只能输入数字

1 $("input[name='searchBean.con1']").keyup(function(){ //keyup事件处理 2 $(this).val($(this).val().replace(/\D|^0/g,'')); 3 }).bind("paste",function(){ //CTR+V事件处理 4 $(this).val($(this).val().replace(/\D|^0/g,'')); 5 }).css("ime-mode&

JQuery限制文本框只能输入数字和小数点的方法

<input type="text" class="txt NumText"  Width="100px"  /> $(function(){ /*JQuery 限制文本框只能输入数字*/ $(".NumText").keyup(function(){ $(this).val($(this).val().replace(/D|^0/g,'')); }).bind("paste",function

Jquery实现文本框输入提示

一些用户体验好的表单都会在文本框里设置输入提示,文本框获取焦点时,提示内容消息,如果未输入,失去焦点时又会出现提示. 网上找到一个比较好用的控件jquery.inputDefault.js 使用方法: 1.在jsp页面引用jquery.inputDefault.js <script src="/js/jquery.inputDefault.js" type="text/javascript"></script> 2.需要为控件增加一个自定义属