使用带有显示和隐藏按钮的纯 CSS 显示和隐藏内容

Question

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

使用纯 CSS 我想通过单击 'hide' 按钮隐藏一个面板，然后我想通过单击 'show' 按钮显示它。事情是，当我点击隐藏按钮时，所述按钮也隐藏并且 'show' 按钮出现。然后当我点击显示按钮时，显示按钮将消失，隐藏按钮将出现在它的位置。

就像现在一样，'hide' 按钮没有隐藏，我不知道我做错了什么。这是 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>

Answer 1

比你想象的要简单

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;
}

Answer 2

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

事实上，即使没有这些也能正常工作：

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

因为一旦您点击 <a> 之外的任何内容，隐藏将不再显示 :focus，这将导致显示元素消失

虽然您可以使用 position:absolute 和 top:-enoughpx 设置隐藏，但实际上并没有移除，但它会从屏幕上消失

Answer 3

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>

使用带有显示和隐藏按钮的纯 CSS 显示和隐藏内容

Showing and hiding something with pure CSS with show and hide button

html

css

cross-browser