javascript - 在不删除填充的情况下设置 div 样式

Question

所以我有一个我一辈子也想不通的问题。我有这段 HTML 代码:

<ul id="dropdown">
                    <li class="twolines"><div id="vadarmindfulness" class="active">Vad är mindfulness</div>

还有这个 CSS 代码来设置它的样式:

#dropdown li{
font-family: 'Open Sans', sans-serif;
font-size:14px;
font-weight: 600;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
  -o-transition: all 0.2s;
transition: all 0.2s;
list-style-type:none;
margin-bottom:20px;
border-radius: 5px;
width: 130px;
-webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 2px 5px rgba(0,0,0,0.4);
box-shadow: 0px 2px 5px rgba(0,0,0,0.4);

text-shadow: 0 1px 0 #fff;

background-color: #b4cc95;

background: -webkit-gradient(linear, left top, left bottom, from(#b4cc95), to(#a5d06e));
background: -moz-linear-gradient(top,  #b4cc95,  #a5d06e);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#b4cc95', endColorstr='#a5d06e');
}

单击其中一个列表项时，将向其添加一个“事件”类。截至目前，该样式只是绿色背景。但是，这仅适用于 li 的一部分 - 文本周围的 div，而不适用于整个内容，因为我使用了填充。我将如何着手让整个事情变得绿色？

我并没有完全让这个 jsfiddle 工作，但是如果你看看最上面的列表项你就会明白我的问题:http://jsfiddle.net/hkrzv/

提前致谢

尼日利 runner 阀

Answer 1

您需要将 .active 类添加到 li : <强> Demo

并在 js 中做一些更改:

 $('.info_box li').removeClass('active');
 $(this).parent().parent().addClass('active');

更新: demo 已在 chrome 中修复。