2

我将悬停效果应用于 div。它所做的基本上就是增加mouseenter的高度，降低mouseleave的高度。

作为一个单独的函数，我将点击效果应用于其中一个 div：

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

它工作得很好，除了当我鼠标离开时，它会崩溃。显然那是因为我有之前的悬停效果。

单击它后，我不希望它能够折叠，直到单击另一个带有锚点的 div。有任何想法吗？

编辑

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

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

4

2 回答 2

6

您可以在单击的位置上放置一个类，并且仅在该类不存在时才折叠 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-06T15:57:47.347 回答
0

假设您的基本标记如下所示：

<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-06T16:08:10.257 回答