li,ol内嵌层列表序号的实现

Sponsor

什么是内嵌列表序号呢，这些序号像小说章节一样，比如小说的第三章的第2节，我们会用3.2来表示，这些列表序号在HTML一般使用li,ol来展示，但是如果内嵌多层就表现不够理想，这里我们写了一个jQuery来控制这个序号。

在线演示地址： DEMO

下面我们一起看看这个教程代码编写方法，制作前记得嵌入jQuery库。

HTML代码

<ol>
	<li>List</li>
	<li>List</li>
	<li>List</li>
	<li>List
		<ol>
			<li>List</li>
			<li>List</li>
			<li>List</li>
		</ol>
	</li>
	<li>List</li>
	<li>List</li>
</ol>

CSS代码

html>/**/body ol { /* Won't be interpreted by IE6/7. */
                list-style-type: none;
                counter-reset: level1;
            }
            ol li:before {
                content: counter(level1) ". ";
                counter-increment: level1;
            }
            ol li ol {
                list-style-type: none;
                counter-reset: level2;
            }
            ol li ol li:before {
                content: counter(level1) "." counter(level2) " ";
                counter-increment: level2;
            }
            ol li span { /* For IE6/7. */
                margin: 0 5px 0 -25px;
            }

jQuery代码

$(document).ready(function() {
	if ($('ol:first').css('list-style-type') != 'none') { /* For IE6/7 only. */
		$('ol ol').each(function(i, ol) {
			ol = $(ol);
			var level1 = ol.closest('li').index() + 1;
			ol.children('li').each(function(i, li) {
				li = $(li);
				var level2 = level1 + '.' + (li.index() + 1);
				li.prepend('<span>' + level2 + '</span>');
			});
		});
	}
});

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。