Question

我想仅使用CSS在点击另一个div时显示div

这是我的HTML代码

<div id="contentmenu">
                <div class="show">
                    <a class="show">
                        My Student
                    </a>
                </div>
                <div class="hidden">
                        <a href="#">Link 1</a><br/>
                        <a href="#">Link 2</a><br/>
                        <a href="#">Link 3</a><br/>
                </div>
</div>

我的CSS代码是

#contentmenu{
    margin-top: 79px;
    background-color: #E9D4B5;
    width: 25%;
    height: 100%;
}
.show{
    margin-top: 2%;
    background-color: #CE9127;
    width: 96%;
    height: 10%;
    padding-left: 4%;
    color: white;
    text-decoration: none;
}
.hidden{
    display: none;
    padding-left: 8%;
    margin-top: 1%;
}

那么当使用CSS点击div（class = show）时如何显示div（class = hidden）

Answer 1

您可以使用Checkbox Hack执行此操作，但请务必确保浏览器支持已足够。它看起来像这样：

#contentmenu{
    margin-top: 79px;
    background-color: #E9D4B5;
    width: 25%;
    height: 100%;
}
.show{
    margin-top: 2%;
    background-color: #CE9127;
    width: 96%;
    height: 10%;
    padding-left: 4%;
    color: white;
    text-decoration: none;
    display: block;
}
.hidden{
    display: none;
    padding-left: 8%;
    margin-top: 1%;
}
input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
input[type=checkbox]:checked ~ .hidden {
   display: block;
}

使用此HTML：

<div id="contentmenu">
    <label for="toggle-1"><a class="show">
      My Student
      </a></label>
<input type="checkbox" id="toggle-1">
  <div class="hidden">
    <a href="#">Link 1</a><br/>
    <a href="#">Link 2</a><br/>
    <a href="#">Link 3</a><br/>
  </div>
</div>

以下是演示：http://jsbin.com/exuvez/1/edit

Answer 2

对于没有黑客攻击，没有javascript你可以通过悬停事件实现你想要的。只是对css的一个小改动和补充：

#contentmenu{
    margin-top: 79px;
    background-color: #E9D4B5;
    width: 25%;
    height: 100%;
}
.show{
    margin-top: 2%;
    background-color: #CE9127;
    width: 96%;
    height: 10%;
    padding-left: 4%;
    color: white;
    text-decoration: none;
}
.hidden{
    display: none;
    padding-left: 8%;
    margin-top: 1%;
  width:100%;
}

.show:hover + .hidden {
  display:block;
}
.hidden:hover {
 display:block; 
}

因此宽度：已经为.hidden添加了100％，并为悬停事件添加了两个规则。

http://codepen.io/anon/pen/eCmox

如何使用CSS单击div时显示另一个div

2 个答案: