Question

我正在使用Wordpress并尝试在此处实现此代码：https://codepen.io/Idered/pen/AeBgF

HTML：

    .read-more-state {
    display: none;
    }

    .read-more-target {
    opacity: 0;
    max-height: 0;
    font-size: 0;
    transition: .25s ease;
    }

    .read-more-state:checked ~ .read-more-wrap .read-more-target {
    opacity: 1;
    font-size: inherit;
    max-height: 999em;
    }

    .read-more-state ~ .read-more-trigger:before {
    content: 'Show more';
    }

    .read-more-state:checked ~ .read-more-trigger:before {
    content: 'Show less';
    }

    .read-more-trigger {
    cursor: pointer;
    display: inline-block;
    padding: 0 .5em;
    color: #666;
    font-size: .9em;
    line-height: 2;
    border: 1px solid #ddd;
    border-radius: .25em;
    }

<div>
    <input type="checkbox" class="read-more-state" id="post-2" />

    <ul class="read-more-wrap">
    <li>lorem</li>
    <li>lorem 2</li>
    <li class="read-more-target">lorem 3</li>
    <li class="read-more-target">lorem 4</li>
    </ul>
  
    <label for="post-2" class="read-more-trigger"></label>
    </div>

但是，我遇到了一些问题-出现了一条灰线（可以切换），而不是显示更多按钮-这正是该用户还面临的https://www.drupal.org/forum/support/post-installation/2016-10-14/read-more-toggle-pure-css-not-working-correctly

通过上面的链接，您可以在这里看到他和我的问题：http://www.monarchschool.org/test-toggle

将对此表示感谢，在此先感谢。

Answer 1

问题是您的标签在您的网站中不在同一级别。运算符~仅定位兄弟姐妹元素，而不是其子孙元素。让我用这个例子来解释。看下面的代码。

.test ~ .example {
   background:green;
}

<p class="test">Test</p>
<p class="nothing">Nothing</p>
<p class="example">Example</p>
<p><span class="example">Second Level Example</span></p>

.test类现在检查类.example的所有同级元素，并将背景色应用为绿色。我们为第二级添加了一个类.example。您的CSS不会定位这些元素。在您的原始代码中，label位于p下，这就是为什么它没有为标签添加内容Show More的原因。一种解决方案是删除p元素并将标签保持在同一级别。否则，请像下面那样更新CSS以定位子元素。

.read-more-state ~ p > label.read-more-trigger:before {
content: 'Show more';
}

.read-more-state:checked ~ p > label.read-more-trigger:before {
content: 'Show less';
}

在这里，您的示例与实时代码一样。

.read-more-state {
    display: none;
    }

    .read-more-target {
    opacity: 0;
    max-height: 0;
    font-size: 0;
    transition: .25s ease;
    }

    .read-more-state:checked ~ .read-more-wrap .read-more-target {
    opacity: 1;
    font-size: inherit;
    max-height: 999em;
    }

    .read-more-state ~ p > label.read-more-trigger:before {
    content: 'Show more';
    }

    .read-more-state:checked ~ p > label.read-more-trigger:before {
    content: 'Show less';
    }

    .read-more-trigger {
    cursor: pointer;
    display: inline-block;
    padding: 0 .5em;
    color: #666;
    font-size: .9em;
    line-height: 2;
    border: 1px solid #ddd;
    border-radius: .25em;
    }

<div>
    <input type="checkbox" class="read-more-state" id="post-2" />

    <ul class="read-more-wrap">
    <li>lorem</li>
    <li>lorem 2</li>
    <li class="read-more-target">lorem 3</li>
    <li class="read-more-target">lorem 4</li>
    </ul>
  
    <p><label for="post-2" class="read-more-trigger"></label></p>
    </div>

Answer 2

我认为您只想要这个：）

.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
  content: 'Show more';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Show less';
}

.read-more-trigger {
    cursor: pointer;
    display: inline-block;
    padding: 0px 10px;
    color: #fff;
    font-size: .9em;
    line-height: 2;
    border: 1px solid #dea119;
    border-radius: 20px;
    background-color: #b9890c;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(0,0,0,0.08);
}

/* Other style */ 
body {
  padding: 2%;
}

p {
  padding: 2%;
  background: #0a0a0a;
  color: #ffffff;
  border: 1px solid #000000;
  border-radius: .25em;
}
p:hover {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(0,0,0,0.08);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" class="read-more-state" id="post-1" />

  <p class="read-more-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="read-more-target">Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt officia quis ab? Excepturi vero tempore minus beatae voluptatem!</span></p>
  
  <label for="post-1" class="read-more-trigger"></label>
</div>

<div>
  <input type="checkbox" class="read-more-state" id="post-2" />

  <ul class="read-more-wrap">
    <li>Bootstrap</li>
    <li>Javascript</li>
    <li class="read-more-target">HTML 5</li>
    <li class="read-more-target">Css 3</li>
  </ul>
  
  <label for="post-2" class="read-more-trigger"></label>
</div>

纯CSS阅读更多/更少按钮不起作用

2 个答案: