WordPress纯CSS实现点击展开全文功能 css 根据判断条件显示或隐藏某标签

CSS :checked伪类选择器

思路是使用checkbox的:checked来做隐藏和显示。跟上面这个CSS Tab使用radio来实现是差不多的。当点击label标签时，会绑定同步点击 "for" 属性值为 "checkbox" 的 "id"。

HTML代码如下：

<input type="checkbox" id="contTab" checked="checked" class="tabbed">

<div id="cont">这是博客的正文</div>

<div class="content-more"><div class="gradient"></div> <label for="contTab" class="readmore">点击展开全文</label></div>

当我点击“点击展开全文”时，也就点击了checkbox，也就改变了checkbox的状态为非选中状态了，根据两个状态来显示不同的CSS，从而实现了展开的功能。需要说明的是这个CSS选择符只兼容IE9及以上。如果要兼容IE8等，可能这个方案就不适合了。 

 CSS代码如下：

/*阅读全文*/

#contTab{

    display: none;

}

.content-more{

    display: none;

}

#contTab:checked ~ #cont{

    max-height: 600px;

    overflow: hidden;

}

#contTab:checked ~  .content-more{

    display: block;

    position: relative;

    padding-top: 20px;

    padding-bottom: 30px;

    text-align: center;

}

#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%;

}

#contTab:checked ~  .content-more .readmore{

    display: inline-block;

    background: #0067cb;

    color: #fff;

    width: 175px;

    height: 42px;

    border-radius: 42px;

    line-height: 42px;

    font-size: 16px;

    cursor: pointer;

}

兄弟选择符(E~F) 从上面的CSS，大家可以看到我用了这个CSS强大的选择符，顾名思义，选择E元素后面的所有兄弟元素F。与相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。 另外说一下这个选择符支持IE7及以上。 总结 如果你的网站不需要兼容IE9以下的，可以使用我这个方案来实现展开全文的需求。

本文来源：廖维林博客，转载请保留出处和链接！

本文地址：https://liaoweilin.com/news/100.html