纯 CSS 完成点一下进行阅读文章全篇⊙＾⊙作用

2021-01-21 00:15 jianzhan

纪要

开发设计文章内容展现目录页面时, 想根据展现一部分文章内容头內容做到基本资料概览的要求就可以, 并展现 【点一下进行阅读文章全篇】 的按键以获得详细信息內容。

参照了文章内容 caibaojian.com/css-tonggle… 的纯 CSS 的念头, 但文章内容叙述的內容可用于单一篇文章的实际效果, 而在应用 <li></li> 标识转化成表数据信息的状况下其实不友善, 因此在这个基础勤奋行了相对性应的提升, 实际编码以下：

<div>
    <ul id="content-ul">
        <!-- 它是储放文章内容內容 LI 标识的标识体 -->
    </ul>
</div>

[id^="contTab"] {
    display: none;
}

.content-more {
    display: none;
}

[id^="contTab"]:checked ~ #content {
    max-height: 95px;
    overflow: hidden;
}

[id^="contTab"]:checked ~ .content-more {
    display: block;
    position: relative;
    text-align: center;
}

[id^="contTab"]:checked ~ .content-more .gradient {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#fff));
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), #fff);
    background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0), #fff);
    height: 80px;
    position: absolute;
    left: 0;
    top: -79px;
    width: 100%;
}

[id^="contTab"]:checked ~ .content-more .readmore {
    display: inline-block;
    background: #319a1717;
    color: #0014ff9e;
    width: 300px;
    height: 30px;
    border-radius: 32px;
    line-height: 32px;
    font-size: 14px;
    cursor: pointer;
    text-indent: 0;
}

自然了, 这儿另附一段 JS 的编码：

function inner(response) {
    for (var val of response.data) {
        document.getElementById('content-ul').innerHTML += '' +
            '<li>' +
            '<h2 class="title">' + val.title + '</h2>' +
            '<p class="update_author">' + val.author_name + ' / ' + layui.util.toDateString(val.update, "yyyy-MM-dd HH:mm:ss") + '</p>' +
            '<input type="checkbox" id="contTab_' + val.id + '" checked="checked" class="tabbed">' +
            '<div id="content">' + val.content + '</div>' +
            '<div class="content-more"><div class="gradient"></div> <label for="contTab_' + val.id + '" class="readmore">点 击 查 阅 全 文</label></div>' +
            '</li>'
    }
}

表明

改进的方法是将关联的标识 ID 特性应用动态性的方法转化成并关联, 次之应用 CSS 挑选器, 应用的是模糊不清配对的方法, 不局限性于某一实际的 ID 挑选器。

源代码

该编码片断是运用于 M&OAS 新项目中, 你可以以点一下这儿查询有关的编码信息内容, 得到更为详细的编码。

PS：假如你进来了竟然发觉沒有有关的编码块, 不必慌乱, 将会我都沒有提交到 GITHU 上, 多多的包含 QAQ ~

头脑是个好产品, 嘿嘿嘿嘿嘿嘿~

到此这篇有关纯 CSS 完成【点一下进行阅读文章全篇】作用的文章内容就详细介绍到这了,大量有关css点一下进行阅读文章全篇內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

纯 CSS 完成点一下进行阅读文章全篇⊙＾⊙作用

为您推荐