使 <li> 列出可点击的图像并保持格式

Question

我正在使用<ul>进行树控件。 单击一个项目可展开或折叠节点。

列表图像（项目符号）不可单击，因此解决方案似乎是隐藏它们并仅显示我自己的图像。 这样做的问题是，当一个项目换行到下一行时，列表项目的默认换行缩进行为将丢失。

如何实现CSS所需的功能？

Answer 1

无需将图片替换为项目符号。 当您将li的onclick事件绑定到某个函数时，单击项目符号似乎也会触发它。 要绑定onclick子弹到不同的功能，包裹li的文字内容在span和分配不同onclick事件; 就像是：

$("li").click(function() {
   alert("I'm a bullet! Glee's awesome!");
});
$("li span").click(function(event) {
   alert("I'm some text! Glee's awesome!");
   event.stopPropagation(); //make sure the li onclick isn't fired
});

还有一些工作示例： 一点链接 。

希望能有所帮助！

Answer 2

您可以使用此：

li { 
    padding-left: 1em;
    text-indent: -1em;
}

也可以是

#myDiv { 
    padding-left: 1em;
    text-indent: -1em;
}

这将在列表/ div的第一行之后缩进。

您可能还需要添加display: block; 如果该元素无法解决问题，请访问该元素。 还没有测试过，但可以试一试。

Answer 3

在这里， <li>标记前面的项目符号对我来说似乎是完全可单击的： http : //jsfiddle.net/jfriend00/5xzNR/，所以我认为您可以只允许常规的<li>标记被单击。