如何取消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效果如果點擊

回答

相關問題