2

在 HTML 文档中，是否可以仅为li有序列表 ( ol) 中的列表项 ( ) 或项目符号的编号设置点击事件？

我希望能够单击该数字，然后进行一些处理。到目前为止，我有两个想法，但希望有其他方法可以使用正常的有序列表：

  1. 使用 CSS 计数器将数字注入到我将放置在数字所在的元素中。
  2. 从相关列表项内部将透明元素绝对定位在数字上。

以下是列表示例。我希望能够单击显示为1.、2.或的部分3.。

HTML 源代码：

<ol>
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ol>

浏览器中的结果：

1. First Item
2. Second Item
3. Third Item
4

2 回答 2

2

使用这个类，只需使用 z-index 即可。

.all {
    margin-left:-30px;
    padding-left: 30px;
}

对于 RTL 方向：

.all {
    margin-right:-30px;
    padding-right: 30px;
}

即：http: //jsfiddle.net/ESQKV/

于 2013-06-01T03:57:57.530 回答
2

应用@Fallexe 建议，但在 JS 中添加跨度：

[].slice.call (document.querySelectorAll ('ol, ul')).forEach (function (list) {
    for (var s, el = list.firstElementChild; el; el = el.nextElementSibling)
      el.innerHTML = '<span>' + el.innerHTML + '</span>';

    list.addEventListener ('click', function (ev) {
        if (ev.target.tagName !== 'SPAN')
          for (var el = this.firstElementChild; el; el = el.nextElementSibling)
              el.className = el === ev.target ? 'selected' : '';
    }, false);    
});

请参阅http://jsfiddle.net/jstoolsmith/6nxeT/的小提琴

于 2013-06-01T10:04:25.690 回答