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]作为一种＆＃34;二进制文件＆＃34; check：是选择的列表项还是不是？

<强> JSFiddle Example

对我所改变的内容的简短解释：

在每个input[type=button] div元素之前添加了.sidehead元素。
向上和向左移动按钮9999px，以便将它们隐藏在屏幕外。
将每个.sidehead div元素更改为与其前一个按钮相关联的label。这样您点击标签就会检查按钮。

由于按钮可以取消选中以及已选中，这意味着您可以再次点击标签并删除颜色更改，实际上会显示＆＃34;未选中＆＃34;看。

此方法的唯一缺点是，由于您的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;
}

Answer 2

单击时只需添加活动类。如下面的代码。

$(function () {
    $('.navigation-title').click(function () {
        $('.navigation-item').removeClass('active');                    
        $('.navgation-links').slideUp('active');
        $('.navigation-title .toggle').text('+');
        $(this).parent().addClass('active');
        $(this).find('.toggle').text('-');
        $(this).next().slideDown();
    });
});

我把小提琴分叉并稍微改变了结构。

Forked JSFiddle

单击时切换不起作用

2 个答案: