悬停时显示/隐藏，那么点击时如何保持显示？

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();
}

之所以是列表项，是因为我单击的这个元素是

标记。我相信这就是为什么它应该是 list-item 而不是 block 的原因？另外，当我在点击函数中执行 alert($(element).css('display')); 时，它会显示列表项。

Answer 1

在单击处理程序内部，您可以在显示元素后取消绑定悬停事件：

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

Answer 2

声明另一个单击事件处理程序并切换元素。

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

Answer 3

我会添加一个类来说明该元素是否已被单击。

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