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的原因，因为我点击的这个元素是<li>标签。我相信这就是为什么它应该是list-item而不是block？此外，当我在click函数中执行alert($(element).css('display'));时，它会显示list-item。

Answer 1

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

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

Answer 2

在div上尝试此代码：

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

Answer 3

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

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

Answer 4

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

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

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

4 个答案: