如何取消jquery div效果如果点击

我有一个应用于div的悬停效果。它所做的基本上是增加鼠标高度，降低鼠标高度。如何取消jquery div效果如果点击

作为一个独立的功能，我已经申请到的div一个一个点击效果：

$(function(){ 
    $('#div1 a').click(function() { 
     $('.theRestofTheDivs').each(function() { 
      $(this).animate({height: "30px"}, 200); 
     }) 
    }); 
});

它的伟大工程，除了当我鼠标离开，它崩溃。显然这是因为我有前面的悬停效果。

它被点击后，我不想让它能够崩溃，直到另一个具有锚点的div被点击。有任何想法吗？

编辑

提供简化的代码，看到它在完整的上下文去http://www.raceramps.com/v2

鼠标悬停“浏览全部”，然后单击它。我不希望它崩溃。

来源

2010-01-06 Jared

一些HTML示例代码对帮助您解决这个问题很有用。你能把东西放在jsbin上吗？ – 2010-01-06 15:56:55

你可以把一个类上一个点击，只有崩溃的div如果该类犯规存在

当另一个DIV点击你从以前的div删除类，并把它添加到一个点击

$(function(){ 
    $('#div1 a').click(function() { 
     $(".KeepOpen").removeClass(".KeepOpen"); 
     $(this).addClass("KeepOpen"); 
     $('.theRestofTheDivs').each(function() { 
      $(this).animate({height: "30px"}, 200); 
     }) 
    }); 
});

并在您的折叠部分添加此

if (!$(this).hasClass("KeepOpen")) 
    // Collapse

来源

2010-01-06 15:57:47

+1。这是动态添加和删除虚拟类的完美用例。 – sberry 2010-01-06 15:59:21

我会看看，谢谢！ – Jared 2010-01-06 16:05:53

做了一些调整，让它与其他一些代码一起工作。非常感谢！ – Jared 2010-01-06 17:48:27

假设你的基本的标记看起来是这样的：

<div id="div1" class="myClass"><a href="#">Div1</a></div> 
<div id="div2" class="myClass"><a href="#">Div2</a></div> 
<div id="div3" class="myClass"><a href="#">Div3</a></div>

你可以这样做：

// Mouseover event 
$(".myClass a").live("mouseover", function() { 
    // If it already has the "selected" class applied to it, do nothing 
    if ($(this).is(".selected")) { 
     return; 
    } 
    else { 
     // Do your hover effect 
     $(this).animate({height: "30px"}, 200); 
    } 
}); 

// Mouseout event 
$(".myClass a").live ("mouseout", function() { 
    // If it already has the "selected" class applied to it, do nothing 
    if ($(this).is(".selected") { 
     return; 
    } 
    else { 
     // Do your mouseout effect (return to default state or whatever else) 
     $(this).animate({height: "20px"}, 200); 
    } 

}); 
// Click Event 
$(".myClass a").live("click", function() { 
    // If it already has the "selected" class applied to it, do nothing 
    if ($(this).is(".selected")) { 
     return; 
    } 
    else { 
     // Remove the selected class from any element that already has it 
     $(".selected").removeClass(".selected"); 
     $(this).addClass("selected"); 
    } 
});

这样的事情，或模拟像这应该工作。

来源

2010-01-06 16:08:10

如何取消jquery div效果如果点击

回答

相关问题