使用显示和隐藏按钮使用纯 CSS 显示和隐藏某些内容答案

【问题标题】：Showing and hiding something with pure CSS with show and hide button使用显示和隐藏按钮使用纯 CSS 显示和隐藏某些内容
【发布时间】：2016-10-29 05:34:12
【问题描述】：

这应该是非常简单和直接的，但我似乎无法做到正确，而且我想要做的是非常具体的。

对于纯 CSS，我想通过单击“隐藏”按钮来隐藏面板，然后我想通过单击“显示”按钮来显示它。问题是，当我单击隐藏按钮时，所述按钮也会隐藏，并且会出现“显示”按钮。然后当我点击显示按钮时，显示按钮会消失，隐藏按钮会出现在它的位置。

就像现在一样，“隐藏”按钮并没有隐藏，我不知道我做错了什么。这是code with example HTML

CSS：

.panel .hideButton {
  display: block;
}

.showButton{
  display: none;
}

.hide:focus ~ .panel{
  display: none;
}
.hide:focus ~ .hideButton {
  display: none;
}
.hide:focus ~ .showButton {
  display: block;
}

.show:focus ~ .panel {
  display: block;
}
.show:focus ~ .hideButton {
  display: block;
}
.show:focus ~ .showButton {
  display: none;
}

HTML：

<div style="border:dotted 1px">
  Title 
  <a href="#" class="hide hideButton">hide</a>
  <a href="#" class="show showButton">show</a>
  <div class="panel" >
     <hr style="border-top: dotted 1px;" /> 
      Something in here</div>
</div>

【问题讨论】：

标签： html css cross-browser

【解决方案1】：

https://jsfiddle.net/ab08s7k6/

#cont {
    display: none;
}
#show:target #cont {
    display: inline-block;
}
#show:target #show {
    display: none;

<div id="show">
    <a href="#show" id="show">Open</a>
    <div id="cont">
        Something in here
        <a href="#hide" id="hide" >Close</a>
    </div>
</div>

【讨论】：

这正是我所需要的！谢谢！

【解决方案2】：

比你想象的要简单

http://jsfiddle.net/6W7XD/1/

HTML

<span class="span3" tabindex="0">Hide Me</span>
<span class="span2" tabindex="0">Show Me</span>
<p class="alert" >Some alarming information here</p>

CSS

body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}

【讨论】：

哦，是的，这就是我的代码的基础。我正在关注的部分是我希望“隐藏我”在单击时消失，并出现“显示我”。当点击“显示我”时，反之亦然。

【解决方案3】：

如果您将display: none; 设置为hideButton，我认为这不可能是因为它不会再出现在:focus 上。

事实上，即使没有这些，它也可以工作：

.show:focus ~ .panel {
display: block;
}
.show:focus ~ .hideButton {
display: block;
}
.show:focus ~ .showButton {
display: none;
}

因为一旦您点击 <a> 之外的任何内容，则 hide 将不再出现在 :focus 上，这将导致 show 元素消失

您可以使用position:absolute 和top:-enoughpx 设置隐藏，它实际上不会删除，但它会从屏幕上消失

【讨论】：