2

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

左侧边栏有

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

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

  1. 隐藏（显示：无）徽标、导航栏和社交 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 上的工具，但它们相当严格）

4

2 回答 2

2

这是一个仅使用 CSS 的解决方案target

演示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;
}
于 2013-09-13T09:05:52.957 回答
1

正如 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/

于 2013-09-13T09:05:40.927 回答