html - 仅使用 CSS 改变各种元素

Question

我有一个带有左侧边栏的页面，我希望能够根据用户是否点击它来打开或关闭它。 不幸的是，在此网站上输入 JavaScript 代码已被禁用，我只能访问 CSS。

左侧边栏有

1. 它的主要 div (parentBlock)
2. 用于显示/隐藏的 div，(toggleBlock)
3. Logo 的 div，(div1)
4. 导航栏的 div，和 (div2)
5. 社交图标的 div (div2)

当用户点击“显示/隐藏”时我想:

1. 隐藏(显示:无) Logo 、导航栏和社交 div，以及
2. 将主 div 的高度设置为较小的值(比如 30 像素)。

有没有办法在 CSS 中做到这一点？

<div class="parentBlock">
  <div class="toggleBlock">Show / Hide</div>
  <div class="divBlah">div1</div>
  <div class="divBlah">div2</div>
  <div class="divBlah">div3</div>
</div>

然后，如果用户再次点击“显示/隐藏”，它将取消隐藏 div 并将高度重新设置为填满屏幕。

这可能吗？

我找到了一些代码，如果“显示/隐藏”按钮在“parentBlock”中，它会起作用，但如果它在“toggleBlock”中，它就不起作用(我必须在 toggleBlock 中有显示/隐藏按钮)( http://tympanus.net/codrops/2012/12/17/css-click-events/ )

我意识到 onClick 事件需要 JavaScript。这些是不可能的，因为我不能使用 JavaScript :( 有些人试图通过使用 :active 或创建复选框并让 checkbox:clicked 值加载操作来绕过它......但它只适用于我的某些关系似乎无法确定。

不幸的是，我无法更改“toggleBlock”的最终结构、div1、div2 和 div3……只能更改其中的内容及其 CSS。还使它变得更加困难的是，网站每次加载页面时都会随机生成 ID=""，因此无法使用 TARGET 方法。此外，3 个 div(div1 到 div3)具有相同的类名。我开始认为这是不可能的:(

(作为引用，我正在尝试使用 New SmugMug 上的工具，但它们的限制相当多)

Answer 1

这是一个使用 target

的纯 CSS 解决方案

演示 http://jsfiddle.net/kevinPHPkevin/r4AQd/

.button {
    display: block;
    width:60px;
    background: red;
     z-index:1;
}
#element {
    display: none;
    background:#fff;
    margin-top:-20px;
    z-index:2;
}
#element:target {
    display: block;
}
#show:target {
    display: block;
}
#hide {
    background: #000;
    color: #fff;
}