2011-08-30 58 views
3

我尝试通过JavaScript(或JQuery)在列表项目符号上分配onclick事件,或者更改它们的图像。我现在如何在列表项也是可点击的时候完成这项工作,但那不是我所需要的。列表项本身应该会得到一个doubleclick事件。在列表项目符号图像上分配点击事件

假设我们有一个清单:

<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> 

有关DoubleClick一个用户列表元素对用户应该被添加到另一个列表。这没有问题。但是现在我想添加列表项目符号上的单击事件来展开和折叠组,即单击时隐藏和显示每个组的用户。

对我的项目使用JQuery似乎没有列表项目符号的选择器。所以我尝试使用背景图像和-images,而不是分配我的点击事件。此外,即使我得到其中一种解决方案的工作,但如果可点击列表项目符号位于双击区域下方,我希望它更好,因为如果在同一元素上分配了双击和双击,它们会导致问题。

有没有人有想法?提前致谢。

回答

3

除了mblase75的回答,你也可以用CSS隐藏默认项目符号。

ul { 
    list-style:none; 
} 

你也可以换一个跨度从图像分离<li>内容,让你处理单击事件分开。

+0

我想这就是诀窍。我将这些内容封装在一个浮动的div中,而不是一个span,以便在整个列表项中获取它,而不仅仅是包含文本的区域。然后'宽度:100%;'为div和链接图像的负边距,它看起来相当不错。谢谢。 – j0ker

+0

我认为确切的细节取决于您的实施,但我很高兴能够让您走上正轨。 – Dennis

5

我不认为LI子弹在技术上是DOM的一部分,所以你不能指派点击事件给他们。

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