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

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>