切换不起作用点击

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

你必须当您单击添加活动类。如下面的代码。

$(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

Answer 2

如果你只想使用CSS，那么我认为这应该是可能的使用臭名昭着的CSS复选框黑客。基本上，您将使用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; 
}