css - 制作列出可点击的图像并保持格式

Question

我正在使用<ul>. 单击项目可展开或折叠节点。

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

如何在 CSS 中实现我想要的？

Answer 1

无需用图像替换子弹。当您将onclickan 的事件绑定li到某个函数时，单击项目符号似乎也会触发它。要将onclick项目符号的 绑定到不同的函数，请将li文本内容包装在 a 中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
});

还有一个工作演示：little link。

希望有帮助！

Answer 2

你可以使用这个：

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

也可以是

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

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

display: block;如果它不起作用，您可能还需要将 a 添加到元素中。没有测试过，但试一试。

Answer 3

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