展开、收起过高div

最新推荐文章于 2021-12-16 11:00:57 发布

MervynLammm

最新推荐文章于 2021-12-16 11:00:57 发布

阅读量229

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Rec_Mervyn/article/details/107670153

版权

前端专栏收录该内容

13 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .contentDiv {
            width: 300px;
        }
        .hideDiv {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<div>
    <div class="contentDiv hideDiv">
        Kubernetes一个核心的特点就是能够自主的管理容器来保证云平台中的容器按照用户的期望状态运行着（比如用户想让apache一直运行，用户不需要关心怎么去做，Kubernetes会自动去监控，然后去重启，新建，总之，让apache一直提供服务），管理员可以加载一个微型服务，让规划器来找到合适的位置，同时，Kubernetes也系统提升工具以及人性化方面，让用户能够方便的部署自己的应用（就像canary deployments）。
    </div>
    <a href="javascript:;" class="showHideA">[展开全部]</a>
</div>
<script type="text/javascript">
    $(".showHideA").on("click", function() {
        var contentDiv = $(".contentDiv");
        if (contentDiv.hasClass("hideDiv")) {
            contentDiv.removeClass("hideDiv");
            $(this).text("[收起]");
        } else {
            contentDiv.addClass("hideDiv");
            $(this).text("[展开全部]");
        }
    });

</script>
</body>
</html>

MervynLammm

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
展开、收起过高div

<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .contentDiv { width: 300px; } .hideDiv { display: -webkit-box; -webkit-box-orient.
复制链接

扫一扫