通过css显示隐藏内容

因此，为了更好地解释，我附上了一个简单的图像，说明我正在努力实现的目标

有一个按钮和三个内容（两个可见，一个隐藏，如上图所示）

当点击按钮时，我想显示隐藏的内容，它位于到内容之间

单用CSS就可以做到这一点吗

例如，我可以使用

display:none隐藏内容然后以某种方式强制它可见

我不确定实现这一目标的最有效方法是什么

如有任何建议，将不胜感激

谢谢

.visible_content:hover > .hidden_content {display:block;}

当您将鼠标悬停在
.visible\u content
上时，将显示
.hidden\u content

但是使用click，我不认为有任何方法可以通过css实现这一点

但在jquery中，它很简单：

$(".visible_content").click(function(){
    $(".hidden_content").fadeIn();
});

当您将鼠标悬停在
.visible\u content
上时，将显示
.hidden\u content

但是使用click，我不认为有任何方法可以通过css实现这一点

但在jquery中，它很简单：

$(".visible_content").click(function(){
    $(".hidden_content").fadeIn();
});

仅在css解决方案中执行此操作：

但是，如果您不反对jquery，只需几行就可以在3秒钟内轻松完成，如下所示

$("#buttonsid button").click(function(){
    $("#idofhiddencontent").toggle();
});

仅在css解决方案中执行此操作：

但是，如果您不反对jquery，只需几行就可以在3秒钟内轻松完成，如下所示

$("#buttonsid button").click(function(){
    $("#idofhiddencontent").toggle();
});


*{
填充：0；
保证金：0；
框大小：边框框；
}
.btn{
显示：内联块；
填充：15px 45px；
边框：2倍实心#000；
颜色：#000；
文字装饰：无；
}
div{
宽度：100px；
高度：100px；
边框：2倍实心#000；
保证金：25像素自动；
}
.隐藏块{
显示：无；
边框：2px实心#f00；
颜色：#f00；
}
.btn:焦点~.block隐藏{
显示：块；
}

块
块隐藏
块
*{
填充：0；
保证金：0；
框大小：边框框；
}
.btn{
显示：内联块；
填充：15px 45px；
边框：2倍实心#000；
颜色：#000；
文字装饰：无；
}
div{
宽度：100px；
高度：100px；
边框：2倍实心#000；
保证金：25像素自动；
}
.隐藏块{
显示：无；
边框：2px实心#f00；
颜色：#f00；
}
.btn:焦点~.block隐藏{
显示：块；
}

块
块隐藏
Block
如果您只想使用CSS实现这一点，那么可以使用复选框或单选按钮代替HMTL按钮标记

这是一个演示

HTML

<input type="checkbox" class="check"/>
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>

.box{
    height:50px;
    width:50px;
    background: gray;
    margin-bottom:20px
}

.two{
    display:none;
}

.check:checked ~ .two {
    display:block
}


1.
2.
3.
.盒子{
高度：50px；
宽度：50px；
背景：灰色；
边际下限：20px
}
.二{
显示：无；
}
.勾选：勾选~.二{
显示：块
}

您可以根据自己的方便设置复选框或单选按钮的样式。
如果您只想使用CSS实现这一点，那么有一种方法可以使用复选框或单选按钮而不是HMTL按钮标记

这是一个演示

HTML

<input type="checkbox" class="check"/>
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>

.box{
    height:50px;
    width:50px;
    background: gray;
    margin-bottom:20px
}

.two{
    display:none;
}

.check:checked ~ .two {
    display:block
}


1.
2.
3.
.盒子{
高度：50px；
宽度：50px；
背景：灰色；
边际下限：20px
}
.二{
显示：无；
}
.勾选：勾选~.二{
显示：块
}

您还可以根据自己的方便设置复选框或单选按钮的样式。
我将完全尝试一下！=）感谢出于好奇，您认为javascript和css在速度和效率方面有什么更好的地方？我不认为您会注意到小型应用程序在速度方面的差异，但是为了保持“关注点分离”，我建议尽可能使用javascript保持行为。特别是如果你打算添加大量的用户交互，好的，我正在测试这个问题中给出的各种解决方案。我将尽可能多地使用javascript=）谢谢BrianNo的问题。如果你想做大量的动画制作，我想看看：我会尝试一下感谢出于好奇，您认为javascript和css在速度和效率方面有什么更好的地方？我不认为您会注意到小型应用程序在速度方面的差异，但是为了保持“关注点分离”，我建议尽可能使用javascript保持行为。特别是如果你打算添加大量的用户交互，好的，我正在测试这个问题中给出的各种解决方案。我将尽可能多地使用javascript=）谢谢BrianNo的问题。如果你想做很多动画，我想看看：谢谢Dmitry！=）我将实现它并将其与javascript进行比较。非常感谢汉克斯·德米特里！=）我将实现它并将其与javascript进行比较。非常感谢，谢谢你，尼利斯。我没有想到单选按钮选项。我会记住这一点。另外，
checked~.two
是否仅指定
.two
？我以前从未使用过
checked~
。我很高兴它对你有帮助
.two
是要显示和隐藏的目标div<代码>：选中

选中复选框时，选择器将工作。谢谢Nilesh。我没有想到单选按钮选项。我会记住这一点。另外，

checked~.two

是否仅指定

.two

？我以前从未使用过

checked~

。我很高兴它对你有帮助

.two

是要显示和隐藏的目标div<代码>：选中时选择器将在选中复选框时工作。请再次查看我的答案。我为解决方案添加了JQuery。请再次查看我的答案。我为解决方案添加了JQuery。谢谢！=）我要试一试。谢谢你！谢谢我要试一试。谢谢你！