显示/隐藏时悬停，然后如何保持单击时显示？

Question

如果我有一个jQuery脚本来显示和隐藏一个元素悬停时，我怎么让我的元素这应该隐藏保持显示，如果我点击它？

$(selector).hover(function(){ 
//this shows the element on mousein 
    $(element).show(); 
    $(element).click(function(){ 
      $(this).css({'display':'list-item'}); 
    }); 
},function(){ 
//this hides element on mouseout 
    $(element).hide(); 
} 

原因的列表项，其因为这个元素，我点击是一种<li>标签。我相信这就是为什么它应该是list-item而不是block？另外，当我在点击功能中做alert($(element).css('display'));时，它显示list-item。

Answer 1

内的点击处理程序，可以显示元素之后取消绑定悬停事件：

$(element).click(function(){ 
    $(this).css({'display':'list-item'}); 
    $(selector).unbind('mouseenter mouseleave') 
}); 

Answer 2

声明另一个click事件处理程序和切换的元素。

$(selector).click(function(){ 
    $(element).toggle(); 
}); 

Answer 3

我会添加一个类来说明元素是否被点击过。

$(element).click(function() { 
    $(this).toggleClass('clicked'); 
}); 

Answer 4

尝试在DIV该代码：

$(".comment_div").hover( 
    function() { $(this).children(".comment_actions").show(); }, 
    function() { $(this).children(".comment_actions").hide(); } 
).click(
    function(){ $(this).children(".comment_actions").show(); } 
);