Question

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

使用纯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>

Answer 1

https://jsfiddle.net/ab08s7k6/

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 3

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

事实上即使没有这些也可以使用：

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

因为只要您点击<a>以外的任何内容，隐藏的内容将不再出现在:focus上，这将导致show元素无论如何都会消失

你可以用position:absolute和top:-enoughpx设置隐藏，但它不会逐渐删除但会从屏幕上消失

使用show和hide按钮显示和隐藏纯CSS的东西

3 个答案: