扩展JQuery中的slideToggle()方法

最新推荐文章于 2023-06-07 16:03:59 发布

CailiaoTang

最新推荐文章于 2023-06-07 16:03:59 发布

阅读量2.1k

点赞数

分类专栏： js技术文章标签： jquery slideToggle 扩展开发者缩放

本文链接：https://blog.csdn.net/lihenhao/article/details/45672959

版权

js技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、 slideToggle()方法

作用：可以方便的控制文本框的上下缩放（就是Y方向上变大，变小）。

缺点：不能指定缩小的最小值，也不能指定放大的最大值。

解释：缩小的时候，slideToggle() 使用的Y值为0，也就是缩小到0，不能让开发者自由指定最小值；放大时，使用的是被伸长控件的height值，也不能让开发者指定除height以外的最大值。

二、扩展内容

1. 内容说明

此处添加了缩小的最小Y值，在使用时，只要在控件的css中指定min-height，就可以了。同时要注意，建议将min-height 和 height设置为同一个值，这样效果会友好一些。

2. 实现代码

<!DOCTYPE html>

<style>
    .stack-box {
        border: 0px;
        margin-top: 1px;
        overflow-y: auto;
        overflow-x: visible;
        min-height: 180px;
        height: 180px;
        display: block;
    }

</style>

<html>
    <head>
        <!-- 先加载jquery.js，大家可以到官网下载 -->
        <script src="/jquery/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#stackBtn").click(function() {
                    // 获取需要上下缩放的文本框
                    // 取得文本框内容的高度，并加20作为文件框向下放大时的高度，这样就没有Y轴上的滚动条
                    // 从css样式中取得指定的最小高度，然后判断是缩小还是放大，最后通过动画完成缩放操作.
                    var stackBox = $("#stack-box");
                    var maxHeight = stackBox[0].scrollHeight + 20;
                    // 从css中获取的值是带px的，所以我们需要用replace方法来去掉px.
                    var minHeight = stackBox.css("min-height").replace("px", "");
                    var height = stackBox.height();
                    if (height <= minHeight) {
                        height = maxHeight
                    } else {
                        height = minHeight;
                    }
                    stackBox.stop().animate({height:height}, "slow");
                });
            });
        </script>
        <title>拓展slideToggle</title>
    </head>
    <body>
        <pre class="stack-box" id = "stack-box">
            在这里输入很多内容，以便测试。
            a<br>
            b<br>
            c<br>
            d<br>
            e<br>
        </pre>

        <div class="col-md-2 col-md-offset-5">
            <p id="stackBtn" >点击这里</p>
        </div>
    </body>
</html>

CailiaoTang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
扩展JQuery中的slideToggle()方法

一、 slideToggle()方法作用：可以方便的控制文本框的上下缩放（就是Y方向上变大，变小）。缺点：不能指定缩小的最小值，也不能指定放大的最大值。解释：缩小的时候，slideToggle() 使用的Y值为0，也就是缩小到0，不能让开发者自由指定最小值；放大时，使用的是被伸长控件的height值，也不能让开发者指定除heig
复制链接

扫一扫