0

这是我拥有的一些标记的简单示例：

HTML：

<input type="checkbox" name="ex1">
<input type="checkbox" name="ex2">
<ul class="reveal">
    <li><a href="#">Hi</a></li>
    <li><a href="#">Bye</a></li>
</ul>

复选框用作过滤器以删除<li>带有某些标签的 s。这一切都很好。我的问题是，当复选框被选中并且过滤器逻辑运行时，它使用 adisplay:none来删除特定<li>的 s 但我用来格式化的 css 在事后没有正确应用。例如，假设单击第一个复选框会删除第一个复选框<li>，而“再见”<li>是唯一剩下的复选框。这样可以正常工作，但是我在 css 中定义的边框仍然存在，即使选择器不再匹配它。这是我使用的选择器：

CSS：

#columns .calendar td ul.reveal li + li {
    border-top: 1px dotted #999;
}

这种样式一开始是正确应用的，但是在display:none应用之后并且“再见”li是唯一剩下的li，它仍然会有虚线边框。

我已经使用浏览器开发者控制台进行了检查，这确实是用于创建边框的唯一样式规则。

我已经阅读了一些关于display:none不重新绘制 DOM 的内容，并访问了一个强制浏览器重新绘制的变量（类似于 $('whatever')[0].offsetHeight），但这似乎不能解决我的问题。

4

2 回答 2

0

您选择的 CSS 选择器对 DOM 的结构感兴趣，而不是对绘制和未绘制的内容感兴趣。即使删除了 S1，选择器 S + S 仍将适用于 S2，这就是它仍然获得顶部边框的原因。

鉴于您能够操作 DOM，我建议您删除并重新添加元素本身，或者编写一个选择器，该选择器将尊重添加到 S1 的类（它也将 display:none 应用于它）。

例如：

selector:not(.hidden) + selector { [Only works in IE9+] }

或者

selector.active + selector.active { [Works in IE7+] }
于 2013-08-19T20:28:42.390 回答
0

基于 jQuery 的解决方案

由于 DOM 是由 JavaScript 操作的，因此 CSS 规则本身将不起作用。

您可以做的是使用 JavaScript 来识别li列表中剩下的第一个元素。

例如：

$('ul.reveal li').filter(':first').addClass('first-child');

CSS规则是：

ul.reveal li {
    border-top: 1px dotted #999;
}
ul.reveal .first-child {
    border-top: none;
}

演示小提琴：http: //jsfiddle.net/audetwebdesign/BXMaB/

jQuery 动作挑选出li每个列表中的第一个元素ul，然后应用 CSS 规则来了解li默认情况下出现在所有元素上的上边框。

除了将其绑定到文档加载事件之外，您还需要在选中复选框（事件）时应用此 jQuery 操作。

于 2013-08-19T20:44:50.373 回答