Html 单击时切换不起作用

有没有办法让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>

用户帐户+

11SS
二,
三,

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

这个布局就是一个很好的例子（只需点击“访问”链接，看看它是怎样的）

---

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

如果您只想使用CSS，那么我认为这应该可以使用臭名昭著的CSS复选框攻击。基本上，您将使用

input[type=checkbox]

作为一种“二进制”检查：列表项是否被选中

简要说明我所做的更改：

在每个

.sidehead

div元素之前添加了一个

input[type=button]

元素

向上和向左移动按钮

9999px

，使其隐藏在屏幕外

将每个

.sidehead

div元素更改为链接到其前面按钮的

标签。通过这种方式，单击标签，它将选中按钮

由于按钮可以被取消选中，也可以被选中，这意味着您可以再次单击标签并删除颜色更改，从而产生“未选中”的外观

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

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

---

您只需在单击时添加一个活动类。如下面的代码所示

$(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();
    });
}); 

我用叉子拨弄小提琴，稍微改变了一下结构

---

我正在写一个答案，但是既然你已经在用JavaScript做其他事情了，为什么不用JavaScript把颜色改成黑色呢？@TylerH你的意思是类似于

$（'.blah'）。单击（function（）{$（this.css（'background'，'black'）；}）我喜欢复选框破解。好主意+1.@TylerH爱图坦卡蒙，谢谢你。然而，我在堆栈上做了一些排序，发现了一些有用的东西，但当我不希望它处于活动状态时，它仍然显示黑色条。请查看：@kris，额外的JavaScript只是将class
sidehead
中所有元素的颜色更改为黑色onclick（这是我在前面的评论中建议的前半部分）。要成功使用此方法，您还必须将非活动元素切换回其原始CSS样式onclick（此外，您可以添加一个if语句，仅当它们以前被单击过时才执行此操作）。令人惊讶的是，这是在使用post或标记中未指定的语言时接受的答案，没有人评论这正是我想要的。再次感谢@lucasBarrosI刚刚编辑了她的代码以适应她的问题。但如果是这样，我可以创建一个完整的导航步骤供您使用。；）不客气@kris，我只是想帮你。