在列表项目符号图像上分配点击事件

Question

我尝试通过JavaScript（或JQuery）在列表项目符号上分配onclick-event，或者更换为替换它们的图像。我现在如何在list-item也可点击时获得这项工作，但这不是我需要的。列表项本身应该得到doubleclick-event。

假设我们有这个清单：

<ul id="allUsers" class="userselect">
    <li id="group1" class="group">Group 1</li>
    <li id="user1-1" class="user">User 1.1</li>
    <li id="user1-2" class="user">User 1.2</li>
    <li id="group2" class="group">Group 2</li>
    <li id="user2-1" class="user">User 2.1</li>
    ...
</ul>

双击一个user-list-element，该用户应该添加到另一个列表中。这没有问题。但是现在我想在列表项目符号上添加单击事件来展开和折叠组，即在点击时隐藏和显示每个组的用户。

在我的项目中使用JQuery似乎没有列表项目符号的选择器。所以我在list-item文本之前尝试了背景图像和-images，但是无法分配我的click事件。此外，即使我得到其中一个解决方案，我希望它更好，如果可点击列表项目符号位于双击区域之下，因为如果点击和双击都会在​​同一元素上分配，则会导致问题。

有人有想法吗？提前谢谢。

Answer 1

我认为LI子弹在技术上不是DOM的一部分，因此您无法为其分配点击事件。

这意味着您必须在每一行上用<img class="li" src="bullet.gif" />....<br />替换您的UL / LI标签，并为图像分配点击事件。

Answer 2

除了mblase75的答案，你还可以用CSS隐藏默认的项目符号。

ul {
    list-style:none;
}

您还可以将<li>内容包装在一个范围内，以将其与图像分开，让您可以单独处理点击事件。

Answer 3

这就像你在找什么？ http://simplebits.com/notebook/2004/07/18/clickable/

它使用CSS属性“拉伸”可链接区域以包含项目符号列表或图像。