Как отменить эффект Div JQuery при нажатии - PullRequest
Новая
       8

Как отменить эффект Div JQuery при нажатии

2 голосов
/ 06 января 2010

У меня есть эффект наведения на div. Все, что он делает, это в основном увеличивает высоту мыши, уменьшает высоту мыши.

В качестве отдельной функции у меня есть эффект щелчка, примененный к одному из элементов div: 

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

Работает отлично, кроме случаев, когда я ухожу, он рушится. Очевидно, это потому, что у меня есть предыдущий эффект парения.

После того, как на него щелкнули, я не хочу, чтобы он мог сворачиваться, пока не щелкнет другой div с якорем. Есть идеи?

EDIT

Предоставленный код упрощен, чтобы увидеть его в полном контексте, перейдите к http://www.raceramps.com/v2

Наведите курсор мыши на «Обзор всех», затем щелкните по нему. Я не хочу, чтобы это рухнуло.

Ответы [ 2 ]

6 голосов
/ 06 января 2010

Вы можете поместить класс в один клик и свернуть 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
0 голосов
/ 06 января 2010

Если ваша базовая разметка выглядит примерно так: 

<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");
    }
});

Нечто подобное или смоделированное так должно работать.

...