Question

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

左侧边栏有

其主要div（parentBlock）
show / hide的div，（toggleBlock）
徽标的div，（div1）
导航栏的div，以及（div2）
社交图标div（div2）

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

隐藏（显示：无）徽标，导航栏和社交div，以及
将主div的高度设置为更小（例如30px）。

有没有办法在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 :(有些人试图通过使用以下任一方法来解决它：激活或创建复选框并具有复选框：点击值加载操作...但它只适用于我的某些关系似乎无法确定下来。

不幸的是，我不能改变“toggleBlock”，div1，div2和div3的最终结构......只有它们中的内容和它们的CSS。同样使其变得更加困难的是，每次页面加载时网站都会随机生成ID =“”，因此无法实现TARGET方法。此外，3 div（div1 thru div3）具有相同的类名。我开始认为这是不可能的：（

（作为参考，我正在尝试使用New SmugMug上的工具，但它们相当严格）

Answer 1

以下是使用target

的仅限CSS的解决方案

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

Answer 2

正如Joum所指出的那样，通过点击事件无法做到这一点，但是在兄弟姐妹上使用悬停你可能会达到类似的效果。例如，尝试添加此css：

div.toggleBlock { display: block; }
div.toggleBlock ~ div { display: none; }
div.toggleBlock:hover ~ div { display: block; }

有关详细信息，请参阅：http://css-tricks.com/child-and-sibling-selectors/

仅使用CSS来改变各种元素

2 个答案: