文字自动下拉隐藏显示

css代码：

<style>
        #s2 {
        width:200px;
        margin:0px auto;
        }
        #s1 {
        overflow:hidden;
        height:18px;
        }

    </style>

body中的代码：

<div id="s1">
        <div id="s2">少时诵诗书所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所</div>

    </div>

jQuery代码：

<script>
    $("#s2").hover(function () {         
        var t = $("#s2").get(0).offsetHeight;
        $("#s1").stop().animate({ height: t }, 500, function () {

        });
       
    }, function () {
        
        $("#s1").stop().animate({ height: "18" }, 500, function () {
            $("s1").css("overflow", "hidden");
        });
    });


</script>

实现效果：鼠标移入触发拉开；鼠标移除重新收起。
改为点击，可以设置一个公共变量，记录次数，除二取余，判断余数，分别写上面两个方法，则第一次点击拉开，再点击收起。

 

 

 

 

不用中间变量，可以提取成方法，如下，多个也可以使用：

<script>
    var d = $("#s1");
    var y = $("#s2");
    $("#s2").click(function () {
       
        se(d, y);
    });
    var t1 = $("#d1");
    var t2 = $("#d2");
    t2.click(function () { se(t1,t2)});


    function se(d, y) {
        
        if (d.get(0).offsetHeight==18) {
            var t =y.get(0).offsetHeight;
            d.stop().animate({ height: t }, 500, function () {

            });

        }
        if (d.get(0).offsetHeight == y.get(0).offsetHeight) {
           d.stop().animate({ height: "18" }, 500, function () {
            });

        }


    }


</script>

 

转载于:https://www.cnblogs.com/wy1992/p/6395352.html