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/

提前致谢

尼日利亚军阀

Answer 1

您需要将.active课程添加到li： Demo

并在js中进行一些更改：

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

已更新： demo 已在Chrome中修复。

设置div而不删除填充

1 个答案: