html - 单击时切换不起作用

Question

无论如何我可以让一个 div 在激活后保持黑色背景吗？

基本上，我有:

<div class="navigation-box">
    <div class="sidehead"><i class="lock"></i><span class="title">User Account</span> <span class="toggle">+</span></div>
        <ul class="navLinks">
            <li>11SS</li>
            <li>2</li>
            <li>3</li>
        </ul>
</div>

一旦悬停，它就会显示黑色背景。但我想让它做的是，点击后保持黑色。

Fiddle

一个完美的例子就是这个布局 http://cdn2.mosaicpro.biz/smart/php/admin/projects_grid.html?v=v1.0.0-rc1 (只需单击“访问”链接即可查看情况)

这就是我想要做的。我以为我可以用它来做 CSS，但它显然不起作用。有什么建议么？

Answer 1

如果您只想使用 CSS，那么我认为这应该可以使用臭名昭著的 CSS 复选框 hack。基本上，您将使用 input[type=checkbox] 作为一种“二进制”检查:列表项是否被选中？

JSFiddle Example

我所做更改的简短说明:

1. 在每个 .sidehead div 元素之前添加了一个 input[type=button] 元素。
2. 将按钮 9999px 向上和向左移动，以便它们隐藏在屏幕外。
3. 将每个 .sidehead div 元素更改为链接到其前一个按钮的 label。通过这种方式，您可以点击标签，它会检查按钮。

由于按钮既可以未选中，也可以选中，这意味着您可以再次单击标签并移除颜色变化，实际上呈现出“未选中”的外观。

此方法的唯一缺点是，由于您的 JavaScript 在您单击另一个列表项时会隐藏一个列表项，因此当您单击另一个标签时会导致尴尬的未着色标签，因此您必须将 JavaScript 更新为自动取消选中折叠的任何列表项的复选框。

这是新的 HTML 和 CSS:

HTML:

<div class="navigation-box">
    <input type="checkbox" id="button1" />
    <label for="button1" class="sidehead"><i class="lock"></i><span class="title">User Account</span><span class="toggle">+</span>
    </label>
    <ul class="navLinks">
        <li>11SS</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

CSS:

body {
    font-family: Verdana;
    font-size: 11px;
    color: #333;
    background: #e1e0de;
    margin: 0;
    padding: 0;
}
#navigation-body {
    clear: left;
    margin-top: 40%;
    position: absolute;
    float: left;
    left: -6%;
    right: -7%;
}
.sidehead {
    padding: 6px 6px 4px 0;
    cursor: pointer;
    display: block;
}
.sidehead:hover {
    background: #191919;
}
.sidehead .lock {
    background: url('../images/lock.png') no-repeat center;
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    margin-top:-5px;
    margin-left:5%;
}
.sidehead:hover .lock {
    background: url("../images/lock-hover.png") no-repeat center;
}
.sidehead span.title {
    font-weight: 600;
    font-size: 12px;
    padding-left: 4px;
}
.sidehead:hover {
    color: white;
}
span.toggle {
    float: right;
    margin-top:3px;
    display: inline-block;
    right:4%;
    left:90%;
    position: absolute;
    cursor: pointer;
}
ul.navLinks {
    margin:0;
    padding-left:35%;
    background: #191919;
}

input[type=checkbox] {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

input[type=checkbox]:checked ~ .sidehead {
    background: #191919;
    color: white;
}