Question

我有一个容器，里面有三个元素。我需要隐藏 .short-post ，显示 .long-post 并修改父宽度。

.container, .short-post, .read-more
{
    display: block;
}

.long-post
{
    display: none;
}

.read-more:active > .short-post
{
    display: none;
}

.read-more:active > .long-post
{
    display: block;
}

.read-more:active > .container
{
    /*Previous width = 623px*/
    width: 100%;
}

<div class="container">
    <div class="short-post">
    something
    </div>
    <div class="long-post">
    something bigger
    </div>
    <span class="read-more">
    READ MORE
    </span>
</div>

我知道我不能使用选择器>但我找不到适合我代码的选项，我在这里阅读所有引用W3Schools CSS Selectors并测试它们。有没有办法用CSS做我想做的事情？我知道用JavaScript可以实现。

Answer 1

使用HTML details element

的CSS方法

details {
  position: relative;
  width: 630px;
}

summary {
  display: block;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: 'READ MORE';
  position: absolute;
  bottom: -20px;
  cursor: pointer;
}

details[open]>summary {
  font-size: 0;
}


details[open]>summary::before {
  content: 'READ LESS';
  font-size: 16px;
}

details p {
  margin-top: 0px;
}

<details>
  <summary>something</summary>
  <p>something bigger</p>
</details>

Answer 2

仅使用css阅读更多按钮，请参阅此

＆＃13;

html { background: white }

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    max-width: 480px;
    width: 90%;
    margin: 3em auto;
    font-size: 75%;
    line-height: 1.3rem;
    font-family: sans-serif;
    position: relative;
    *zoom: 1;
}

body:before, body:after {
    content: "";
    display: table;
}

body:after { clear: both }

p { margin-bottom: 1.3rem }

.container {
    margin-bottom: 3rem;
    position: relative;
    *zoom: 1;
}

.container:before, .container:after {
    content: "";
    display: table;
}

.container:after { clear: both }

.container figure {
    float: right;
    width: 32.5%;
}

.container .short-post {
    float: left;
    width: 62.5%;
}

.container .long-post {
    display: none;
    visibility: hidden;
}

div {
    -webkit-transition: 1s linear;
    -moz-transition: .125s linear;
    -ms-transition: .125s linear;
    -o-transition: .125s linear;
    transition: 1s linear;
}

input[type=checkbox] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

[for="read_more"] {
    position: absolute;
    bottom: -3rem;
    left: 0;
    width: 100%;
    text-align: center;
    padding: .65rem;
    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1);
}

[for="read_more"]:hover {
    background: rgba(0,0,0,.5);
    color: rgb(255,255,255);
}

[for="read_more"] span:last-of-type {
    display: none;
    visibility: hidden;
}

input[type=checkbox]:checked ~ .short-post, input[type=checkbox]:checked ~ .long-post {
    display: block;
    visibility: visible;
    width: 100%;
}

input[type=checkbox]:checked ~ figure { width: 100% }

input[type=checkbox]:checked ~ [for="read_more"] span:first-of-type {
    display: none;
    visibility: hidden;
}

input[type=checkbox]:checked ~ [for="read_more"] span:last-of-type {
    display: block;
    visibility: visible;
}

＆＃13;

<div class="container">
<input type="checkbox" id="read_more" role="button">
    <label for="read_more" onclick=""><span>Read More</span><span>Less</span></label>     
    <div class="short-post">
      <p>Owls are a group of birds that belong to the order Strigiformes, constituting 200 extant bird of prey species. Most are solitary and nocturnal, with some exceptions (e.g. the Northern Hawk Owl). </p>
    </div>  
 
<div class="long-post">
    <p>Owls hunt mostly small mammals, insects, and other birds, although a few species specialize in hunting fish. They are found in all regions of the Earth except Antarctica, most of Greenland and some remote islands. Though owls are typically solitary, the literary collective noun for a group of owls is a parliament. Owls are characterized by their small beaks and wide faces, and are divided into two families: the typical owls, Strigidae; and the barn-owls, Tytonidae.</p>
    <p>Owls have large forward-facing eyes and ear-holes; a hawk-like beak; a flat face; and usually a conspicuous circle of feathers, a facial disc, around each eye. The feathers making up this disc can be adjusted in order to sharply focus sounds that come from varying distances onto the owls' asymmetrically placed ear cavities. Most birds of prey sport eyes on the sides of their heads, but the stereoscopic nature of the owl's forward-facing eyes permits the greater sense of depth perception necessary for low-light hunting. Although owls have binocular vision, their large eyes are fixed in their sockets — as are those of other birds — so they must turn their entire head to change views. Owls can rotate their heads and necks as much as 270 degrees in either direction. As owls are farsighted, they are unable to see clearly anything within a few centimeters of their eyes. Caught prey can be felt by owls with the use of filoplumes — like feathers on the beak and feet that act as "feelers". Their far vision, particularly in low light, is exceptionally good.</p>
</div>

</div>

＆＃13;

隐藏容器并显示另一个容器

2 个答案: