1

一个快速的 CSS 问题。我有一些带有复选框的列表项，我想让整个项目可点击。很简单...只需将其包裹在复选框的标签中即可。这行得通。这是我的两个问题（我将它们都放在这里是因为我认为它们可能是由同一件事引起的）。

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

这是一个 jsFiddle

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

3 回答 3

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>.

另一个注意事项：对于插入图标，使用 a<span>而不是<i>作为 span 没有语义，唯一的目的是添加样式。

于 2013-02-05T16:08:26.343 回答
1

这是两个不同的问题。

第一个问题是由于您的 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/

于 2013-02-05T16:10:23.873 回答
1

我建议做一些小的改动。

  1. 制作标签display: block，使其一直延伸到 LI。这样，标签将拦截 LI 内任何地方的点击。

  2. 将单击处理程序附加到复选框本身（以上将有助于此）。点击后，使用jQuery.closest()找到对应的 LI 并在其上应用 CSS。

  3. li:not(:last-child)似乎工作，即选择所有LI，除了最后一个孩子。

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

演示在这里

于 2013-02-05T16:19:46.807 回答