Question

快速的CSS问题。我有一些带复选框的列表项，我想让整个项目可点击。足够简单......只需将其包装在复选框的标签中即可。这有效。这是我的两个问题（我把它们都放在这里因为我认为它们可能是由同样的事情造成的）。

问题：我正在尝试使用：not（：last-child）在每个列表项之间放置分隔线（除了最后一个）并且我遇到了麻烦。

HTML

<div class="box50">
    <div class="filterFolder">Companies<i class="icon-caret-down"></i></div>
    <ul id="companies">
        <li><label><input type="checkbox" name="checkbox" value="value" /> Apple</label></li>
        <li><label><input type="checkbox" name="checkbox" value="value" /> Microsoft</label></li>
        <li><label><input type="checkbox" name="checkbox" value="value" /> Google</label></li>
    </ul>
    <div class="filterFolder">People<i class="icon-caret-down"></i></div>
    <ul id="people">
        <li><label><input type="checkbox" name="checkbox" value="value" /> Mark Zuckerberg</label></li>
        <li><label><input type="checkbox" name="checkbox" value="value" /> Steve Jobs</label></li>
        <li><label>><input type="checkbox" name="checkbox" value="value" /> Bill Gates</label></li>
    </ul>
    <div class="filterFolder">(+) Add New</div>
</div>

CSS

ul li {
    font-size:12px;
    padding:2px 7px;
    border-bottom:1px dashed #EFEFEF; 
}
    ul li:hover {
        background:#EFEFEF;
        cursor:pointer;
    }
    .listSelected {
        background:red;
    }

Answer 1

我会这样解决：

<强> HTML

<li>
    <label>
        <input type="checkbox" name="checkbox" value="value"> Apple
    </label>
</li>

<强> CSS

ul label {
    display: block;
    border-bottom:1px solid red;
}

ul li:last-child label {
    border:none;
}

这是有效的HTML，整个<li>似乎是可点击的 - 实际上您仍在点击<label>。

另一个注意事项：要插入图标，请使用<span>代替<i>作为跨度，没有语义含义，也是添加样式的唯一目的。

Answer 2

这是两个不同的问题。

第一个问题是由于您的HTML无效。只有li可以是ul的孩子。 label不是有效的孩子。解决方案很简单：将<label>包裹在<li>而不是相反的位置，并相应地更改样式规则。

您的第二个问题是由于标签的正在检查的输入的默认操作引起的一些奇怪的行为导致标签上的点击事件再次触发（即两次）。我无法解释这一点，但一个简单的解决方案是检查输入是否被检查以确定是否应该添加类，因为“检查”发生在click的第二次触发之前。

if ($(this).find('input').prop('checked')) {
    $(this).addClass("listSelected");
}
else {
    $(this).removeClass("listSelected");
}

http://jsfiddle.net/ExplosionPIlls/GFcvf/

Answer 3

我建议稍作改动。

制作标签display: block，使其一直延伸到LI。这样，标签就会拦截LI内任何地方的点击。
将一个点击处理程序附加到复选框本身（以上将有助于此）。点击后，使用jQuery.closest()查找相应的LI并在其上应用CSS。
li:not(:last-child)似乎有效，即选择除最后一个孩子之外的所有LI。

这有希望回答你的所有3个问题。

Demo here

：not（：last-child）不使用标签包装列表项

3 个答案: