css - 使用 css 隐藏和显示元素

Question

我正在迈出学习 html、css 和 php 的第一步。我在互联网上制作了一些类(class)，现在我决定使用 Wordpress 制作一个网站，这样我就可以继续从实践中学习。

问题是我制作了一个页面，其中包含一个用于视频的自定义字段和一个用于描述的自定义字段。

正如您在图片中看到的，我使用 html 中名为 About 的详细信息标签隐藏了描述的所有文本。

当我点击关于我看到这个:

还有我的问题: 如何在显示其他元素时隐藏某些元素？我想打开这个页面，只看到文本和一个关闭按钮。这意味着当详细信息打开时，页面不应显示“菜单”链接和“奇怪的魔法”标题。

我已经尝试过了，但它不起作用:

details[open] .entry-title .menu-toggle{
    display: none;
} 

你有什么建议吗？使用 css 可以做些什么吗？

Answer 1

我想你应该试试这个，也许它会对你有帮助..

label {
  display:block;
  margin:20px 0 10px 0;
}
label:hover {
  text-decoration:underline;
}
input {
  position:absolute;
  left:-999em
}
.hide {
  width:50%;
  border:1px solid #000;
  background:rgba(148, 148, 148, 0.33);
  box-shadow: 3px 3px 10px;
  max-height:999em;
  opacity:1;
  height:auto;
  overflow:hidden;
  transition:opacity .5s linear;
}
.hide p {
  padding:10px;
  margin:0
}
input[type=checkbox]:checked + div {
  opacity:0;
  max-height:0;
  border:none;
  transition:opacity .5s linear, max-height .5s linear;
}
.follow{
  border-top:1px solid blue;margin:0;
}

演示:https://jsfiddle.net/Pratik_009/t41nn2nh/