Question

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

首先点击：Div / Map高出100px 第二次点击：Div / Map再高出100px 第三次点击：Div / Map缩小100px，第四次点击：Div / Map再缩小100px并返回其原始高度。

第五次点击：应重复以前的所有操作。

这是我到现在为止所做的事情，但在我第四次点击之后，没有任何事情发生了：

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

Fiddle Demo

Answer 1

您不需要那么多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;
    });
});

JSFiddle

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

Answer 3

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

Answer 4

一旦到达3 -

，您需要将var重置为0

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

您也不应该使用数组来存储匹配。

hits = [0]

应该是

hits = 0;

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

Answer 5

在此

中的最后一个if类型

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

DEMO

Answer 6

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/

Answer 7

你走了： 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

Answer 8

假设您想要扩展，收缩然后重新扩展：

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

Answer 9

我将如何做到这一点：

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/

Answer 10

在最后添加此项以重置计数器：

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

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

Answer 11

可以是这样的吗？

    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，因为如果它关闭了就不能点击容器......

多次展开div元素

11 个答案: