css - 在没有 JavaScript 的情况下单击时更改 的宽度？

Question

我正在使用“窗口布局”(也就是说，某些 div 中的内容看起来像浏览器中的窗口，用于网络应用程序外观)，我想要以下功能:

• 单击 div 时，它会变小，以免占用空间。再次单击时，它会重新展开。

这是一个包含两个 <div> 的简单页面示例小号:

假设 <div id="window1">和 <div id="window2">

#window1 {
    width: 30px;
}

#window1:active {
    width: 100px;
}

问题是，一旦松开鼠标按钮，宽度就会恢复到原来的大小。

---

基本上，该页面在屏幕左下角有一个小菜单 ( fixed )，对于分辨率较小(1024 及以下)的用户，我想让开它，因为它会妨碍文本。

Answer 1

这是我使用 :target - http://jsfiddle.net/joplomacedo/V6pJT/3/ 的方式

HTML

<div class="block">
    <a class="open" href="#menu"></a>

    <div id="menu">
        Menu Item 1<br />
        Menu Item 2<br />
        Menu Item 3<br />
        Menu Item 4<br />
        Menu Item 5<br />
        Menu Item 6<br />
        Menu Item 7<br />
        <a class="close" href="#"></a>
    </div>
</div>

CSS

.block {
    position: relative;
}

#menu{
    width: 100px;
    background: red;
    border: 1px solid #aaa;
}

#menu:target {
    background: orange;
    width: 200px;
}

.open,
.close {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
}

.close {
    display: none;
}

#menu:target .close {
    display: block;
}

不幸的是，这个解决方案在您每次单击时都会使页面跳转。它也不必要地大。利用 :checked 选择器的解决方案将需要更少的 html 和 css，并且不会在每次点击时都跳转页面。这是该解决方案，也是我推荐的解决方案:

HTML...

<div class="block">
    <label for="toggle"></label>
    <input type="checkbox" id="toggle"/>

    <div id="menu">
        Menu Item 1<br />
        Menu Item 2<br />
        Menu Item 3<br />
        Menu Item 4<br />
        Menu Item 5<br />
        Menu Item 6<br />
        Menu Item 7<br />
    </div>
</div>

...和 ​​CSS...

.block { 
    position: fixed;
    bottom: 0;
}

#toggle {
    display: none;
}

label[for="toggle"] {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
}

#menu{
    width: 100px;
    background: red;
    border: 1px solid #aaa;
}

#toggle:checked ~ #menu {
    background: orange;
    width: 200px;
}