Question

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

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

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

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

Answer 2

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

#menu{
    display: none;
}

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

单击时没有JavaScript更改<div>的宽度？</div>

2 个答案: