2

我有一个搜索栏，结果应该显示在谷歌地图上。我想展开和折叠此地图，以便可以看到更多结果。但我不想要一个正常的切换功能。我想要一个多次点击操作：

第一次点击：Div/Map 变高 100px 第二次点击：Div/Map 再变高 100px 第三次点击：Div/Map 变小 100px，第四次点击：Div/Map 再变小 100px 并返回到原来的高度。

第五次点击：应该重复之前的所有动作。

这就是我到现在为止的事情，但是在我第四次点击之后，什么都没有发生了：

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

小提琴演示

4

11 回答 11

5

您不需要那么多animate电话，因为您基本上只需更改高度修饰符。由于基本上有四种状态（两种用于上升，两种用于下降），您需要相应地重置计数器（即，当它达到 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;
    });
});

JSF中。

于 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

从 更改hits == number为hits%4 == number

$(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:03:47.223 回答
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

一旦达到 3，您需要将 var 重置为 0 -

if (hits == 3)
{ 
    $("#header").animate({'height':'-=100px' }, 300, function() {});
    hits = -1;
}

您也不应该使用数组来存储命中。

hits = [0]

应该

hits = 0;

http://jsfiddle.net/XZ7mW/10/

于 2013-09-13T15:04:26.380 回答
1

在最后一个 if 输入这个

 $("#header").animate({'height': '-=100px'}, 300, function () {});
     hits = 0;//make hits 0
     return;//return so it doesnt add to hits
 }

演示

于 2013-09-13T15:04:54.133 回答
1

JAVASCRIPT：

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

小提琴：http: //jsfiddle.net/XZ7mW/12/

于 2013-09-13T15:05:01.343 回答
1

给你： JSFiddle

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

        }
        else if (hits == 1) {
            $("#header").animate({
                'height': '+=100px'
            }, 300, function () {});
            hits++;

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

        }
        else if (hits == 3) {
            $("#header").animate({
                'height': '-=100px'
            }, 300, function () {});
            hits = 0;
        }
        return false;
    });
});

hits当它到达时你需要重置3

于 2013-09-13T15:06:14.567 回答
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

在末尾添加以重置计数器：

if(hits==4) {
    hits=0;
}

http://jsfiddle.net/XZ7mW/7/

于 2013-09-13T15:03:57.080 回答
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 回答