Question

我正在尝试制作一个笑话网站的代码，它使用显示/隐藏按钮来显示内容/隐藏内容。

它开始隐藏，然后有一个按钮来改变它。

然而，它不能包含任何javascript或jquery，因为这是我正在做的学校项目的评估（主要是在css上）

可能有多个吗？到目前为止，我只取得了一个。

到目前为止我的代码（我从这个网站http://cssdeck.com/labs/css-only-showhide获得了它）：（HTML）

<article>
    <input type="checkbox" id="RMa" role="button">
    <label for="RMa" onclick=""><span>Show</span><span>Hide</span></label>     

    <section>
        <p>Joke</p>
    </section>    
    <section>
        <p>Punchline</p>
    </section>

</article>

（CSS）

article {
position: relative;
}

article:before, :after {
display: table;
}

article:after { clear: both     }

article section:last-of-type {
display: none;
visibility: hidden;
}

 input[type=checkbox] {
width: 1px;
overflow: hidden;
position: absolute;
}

[for="read_more"] {
position: absolute;
left: 100px;
width: ;
text-align: center;
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 ~  section {
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;
}

Answer 1

您使用input[type=checkbox]查看是否选中了复选框，并且您应该使用ID，这样您就可以检查每个ID而不是所有这些ID，例如：

#first[type="checkbox"] { 
  /* Code here */
}

#second[type="checkbox"] {
  /* Code here */
}

多个CSS只显示/隐藏按钮（没有java / jquery）

1 个答案: