3

我有一个有序列表，默认情况下，某些列表项<li>通过 css 隐藏。然而，这些可以根据用户行为（通过 JavaScript）显示出来。

如果它们被显示，整个列表会重新排序，以便它们按顺序排列，而当它们被隐藏时，列表没有顺序中断。

我希望列表的每个元素（即使是开始隐藏的元素）在列表中都有固定的数字，即使这意味着在页面加载时列表会有间隙（1. 2. 4. 5. 等）

在这种情况下，如果所有元素都显示出来，则列表只会按数字显示一个完整的元素列表。

这是一个 jsfiddle 说明我的问题 http://jsfiddle.net/hesxT/1/

任何想法将不胜感激

4

5 回答 5

3

http://jsfiddle.net/hesxT/6/

采用...

visibility: hidden;
height: 0;

隐藏项目。然后删除这些属性以使项目可见。

并且，正如其他人指出的那样，去掉<div>包装<li>，不需要它。

于 2012-11-20T04:00:18.843 回答
1

li 元素有一个属性“value”，可用于设置数字列表项的值。

<ol>
    <li value='1'>Item 1</li>
    <li value='3'>Item 3</li>
    <li value='4'>Item 4 </li>
    <li value='5'>Item 5</li>
</ol>
于 2012-11-20T03:53:25.557 回答
0

我对你的代码做了一些修改。看一下这个，

http://jsfiddle.net/hesxT/2/

代码：

$('li').each(function(i){
    $(this).html((i+1)+'. '+$(this).html());
});
$('#myform').change(function() {
    if ($('#reveal').attr('checked')){
        $('#hide').show();
    } else {
        $('#hide').hide();
    }
});
于 2012-11-20T03:43:44.630 回答
0

我没有看到您在 Firefox 16 中描述的问题。但它显然发生在早期版本的 Firefox 和 IE 中（我只测试了 IE 7）。

所以这就是你需要的跨浏览器工作：

.hidden {
    position: absolute;
    height: 0;
    width: 0;
    overflow: hidden;
}

在 IE 中，使用其他建议的答案将阻止隐藏元素的子元素在通过脚本删除隐藏类时正确显示。

此外，屏幕阅读器可能会或可能不会按您的预期显示隐藏内容，但这可能不是问题。

li注意：将元素包装在元素中是无效的div。对于那些有兴趣的人，请参阅有关修复该问题的问题。

于 2012-11-20T03:51:24.207 回答
0

这是一种使用 CSS 和 toggleClass 的方法，它在列表中使用自动编号：

.hidden {
    height: 0px;
    overflow: hidden;
}

http://jsfiddle.net/AMvp8/

于 2012-11-20T04:19:45.957 回答