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

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>