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

【问题标题】：show/hide when hover, then how to stay shown when clicked?悬停时显示/隐藏，然后单击时如何保持显示？
【发布时间】：2012-01-19 04:23:57
【问题描述】：

如果我有一个在悬停时显示和隐藏元素的 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？另外，当我在 click 函数中执行 alert($(element).css('display')); 时，它会显示列表项。

【问题讨论】：

您在每次悬停时添加点击处理程序...代码应类似于：$(selector).hover(function(){...}, function(){...}).click(function(){...});

标签： jquery function click hover show-hide

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

在 div 上试试这个代码：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：