使用css隐藏和显示元素

我正在学习html，css和php的第一步。我在互联网上制作了一些课程，现在我决定用Wordpress制作一个网站，这样我就可以继续从实践中学习。使用css隐藏和显示元素

问题是我用一个视频的自定义字段和一个自定义字段来描述页面。

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

当我点击关于我看到这一点：

而且有我的问题：如何隐藏一些元素时，会显示其他元素？我想打开此页面，只看到文字和关闭按钮。这意味着当细节被打开时，页面不应该显示“菜单”链接和“奇怪的魔法”标题。

我已经tryied这一点，但它不工作：

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

你有没有一些建议？这是可以做的使用CSS？

来源

2016-06-15 Valentin Verdegales

可用'jQuery'？我想你会需要使用它 –

也许我可以在我的functions.js文件中使用if else语句？你有一些例子吗？有一个参考对我来说会很好！谢谢 –

JavaScript是要走的路，函数.js听起来就像放置代码的地方。您需要以下逻辑：将事件监听器添加到“关于”链接。单击链接时，根据当前状态显示/隐藏文本：https://css-tricks.com/snippets/javascript/showhide-element/ – Jonas

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

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/

来源

2016-06-15 13:00:18

使用css隐藏和显示元素

回答

相关问题