2

divにホバー効果を適用しました。基本的には、mouseenterの高さを増やし、mouseleaveの高さを減らします。

別の関数として、divの1つにクリック効果を適用します。

$(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からクラスが削除され、クリックされた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 に答える