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

Question

我正在使用“窗口布局”（即，某些 div 中的内容看起来像浏览器中的窗口，用于网络应用程序外观），我想要以下功能：

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

这是一个带有两个<div>s 的简单页面的示例：

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

#window1 {
    width: 30px;
}

#window1:active {
    width: 100px;
}

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

---

基本上，该页面在屏幕左下方有一个小菜单fixed(

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

​</p>

​</p>

Answer 2

您可以使用:target伪选择器 - http://jsfiddle.net/V6pJT/

#menu{
    display: none;
}

#menu:target {
    width: 200px;
    display: block;
    border: 1px solid #aaa;
}​