如果单击,如何取消jquery div效果

Question

我有一个悬停效果应用于div.它所做的只是增加鼠标中心的高度,降低鼠洞的高度.

作为一个单独的函数,我有一个点击效果应用于其中一个div:

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

它工作得很好,除非我鼠标移动,它会崩溃.显然那是因为我有以前的悬停效果.

点击后,我不想让它能够折叠,直到点击另一个带锚点的div.有任何想法吗？

编辑

提供的代码已经过简化,要在完整的上下文中查看,请访问http://www.raceramps.com/v2

将鼠标悬停在"全部浏览"上,然后单击它.我不希望它崩溃.

Answer 1

你可以在单击的那个上放一个类,如果该类不存在则只折叠div

单击另一个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