2

検索バーがあり、結果は Google マップに表示されるはずです。このマップを展開したり折りたたんだりして、より多くの結果が表示されるようにします。しかし、通常のトグル機能は必要ありません。複数のクリック アクションが必要です。

1 回目のクリック: Div/Map が 100px 高くなります 2 回目のクリック: Div/Map がさらに 100px 高くなります 3 回目のクリック: Div/Map が 100px 小さくなります

5 回目のクリック: 前のすべてのアクションを繰り返す必要があります。

これは私が今まで得たものですが、4回目のクリックの後は何も起こりません:

    $(function(){
        var hits = [0]; 
$('.kaart-uitklappen').click(function(){...

フィドルのデモ

4

11 に答える 11

5

animate基本的に高さ修飾子を変更するだけなので、それほど多くの呼び出しは必要ありません。基本的に 4 つの状態 (2 つが上昇、2 つが下降) があるため、それに応じてカウンターをリセットする必要があります (つまり、4 に達したとき) - これはmoduloオペレーターで簡単に実行できます。

$(function(){
    var hits = -1; 
    $('.kaart-uitklappen').click(function(){ 
        hits = (hits+1) % 4;
        var modifier = hits > 1 ? '-' : '+';
        $('#header').animate({height: modifier + '=100px' }, 300);
        return false;
    });
});

JSFiddle。

于 2013-09-13T15:05:55.060 に答える
2

値が を超えないようにする必要があります。超過し3ないと、その後のクリックで何も起こりません。0また、ではなくに等しい値から始める必要があります[0]。

これらのアイデアを組み込んだ単純化されたコードを次に示します。http://jsfiddle.net/XZ7mW/16/

var hits = 0; 
$('.kaart-uitklappen').click(function(){ 
    if  (hits < 2) 
        $("#header").animate({'height':'+=100px' }, 300);
    else
        $("#header").animate({'height':'-=100px' }, 300);
    hits = (hits + 1) % 4;
    return false;
});
于 2013-09-13T15:02:52.480 に答える
1

これが私がそれを行う方法です：

var hits = 0;

$('.kaart-uitklappen').click(function () {
    if (hits < 2) 
        $("#header").animate({'height': '+=100px'}, 300);
    else 
        $("#header").animate({'height': '-=100px'}, 300);

    if (++hits == 4)
            hits = 0;
    return false;
});

http://jsfiddle.net/KX7aq/

于 2013-09-13T15:11:09.003 に答える
1

これを展開し、縮小してから再展開するとします。

var hits = [0];var hits = 0;テストしhits > 3て 0 に戻す必要があります。

または、条件でモジュラス演算を使用します。

http://jsfiddle.net/XZ7mW/19/

    $(function(){
        var hits = 0; 
        $('.kaart-uitklappen').click(function(){ 
            if  (hits % 4 == 0) {
                $("#header").animate({'height':'+=100px' }, 300, function() {});
            }
            if (hits % 4 == 1) { 
                $("#header").animate({'height':'+=100px' }, 300, function() {});
            }
            if (hits % 4 == 2) { 
                $("#header").animate({'height':'-=100px' }, 300, function() {});
            }
            if (hits % 4 == 3) { 
                $("#header").animate({'height':'-=100px' }, 300, function() {});
            }
            hits++;
            return false;
        });
});
于 2013-09-13T15:09:38.077 に答える
0

このようなことができますか？

    var direction = "open";
        $('.kaart-uitklappen-button').click(function(){
            if (direction == "open"){
                $('.kaart-uitklappen').height($('.kaart-uitklappen').height()+100)

                if ($('.kaart-uitklappen').height() >= 200){
                    direction = "close";
                }
            }else{
                $('.kaart-uitklappen').height($('.kaart-uitklappen').height()-100)
                if ($('.kaart-uitklappen').height() <= 0){
                    direction = "open";
                }
            }

コンテナーが閉じているとクリックできないため、kaart-uitklappen-button を使用します...

于 2013-09-13T15:10:14.057 に答える