Javascript 多次展开div元素

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

第一次单击：Div/Map获得100px更高 第二次点击：Div/Map再高100像素 第三次单击：Div/Map将减小100px， 第四次单击：Div/Map再小一个100px，并返回其原始高度

第五次单击：应重复前面的所有操作

这是我到目前为止得到的，但在我第四次单击之后，什么也没有发生：

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

---

您需要确保您的值不超过

3

，否则在随后的单击中不会发生任何事情。此外，您应该从值

0

开始，而不是

[0]

下面是一些简化的代码，其中包含以下思想：

var hits=0；
$（'.kaart uitklappen'）。单击（函数（）{
如果（点击次数<2）
$（“#头”）.animate（{'height'：'+=100px'}，300）；
其他的
$（“#头”）.animate（{'height'：'-=100px'}，300）；
点击次数=（点击次数+1）%4；
返回false；
});

从

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

---

将此项添加到末尾以重置计数器：

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

---

一旦达到3-

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

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

hits = [0]

应该是

hits = 0;

---

关于此中最后一个if类型

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

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

---

Fiddle:

您不需要太多的

动画调用，因为您基本上只需要更改高度修改器。由于基本上有四种状态（两种用于上升，两种用于下降），因此需要相应地重置计数器（即，当计数器达到4时）-这可以通过
模运算轻松完成

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

.
给你：

当它达到
3
时，您需要重置
点击次数
，假设您希望它展开、收缩然后重新展开：

var hits=[0]应为
var hits=0
并且您需要测试
命中率>3
并将其设置回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";
                }
            }   

var direction=“打开”；
$（'.kaart uitklappen button'）。单击（函数（）{
如果（方向=“打开”）{
$（'.kaart-uitklappen'）。高度（$（'.kaart-uitklappen'）。高度（）+100）
如果（$（'.kaart-uitklappen'）.height（）>=200）{
方向=“关闭”；
}
}否则{
$（'.kaart-uitklappen'）.height（$（'.kaart-uitklappen'）.height（）-100）
如果（$（'.kaart-uitklappen'）.height（）我会这样做：

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

var hits=0；
$（'.kaart uitklappen'）。单击（函数（）{
如果（点击次数<2）
$（“#头”）.animate（{'height'：'+=100px'}，300）；
其他的
$（“#头”）.animate（{'height'：'-=100px'}，300）；
如果（++hits==4）
点击率=0；
返回false；
});

按照@Styphon的建议，将
hits=-1；
插入到最后一个if子句中更优雅/更快，但是如果你问我的话，这个解决方案更可读。谢谢。这是一个很好的解决方案，非常好用，javascript代码更少！你能告诉我如何在前两次单击中添加文本/图像“down”和文本/图像“up”吗对于第三次和第四次单击？在这四次单击之后，它应该再次说down？找到了解决方案。我在第二次单击时使用.addClass（'active'）添加了一个类，并在第四次单击时使用.removeClass（'active'）将其删除。
    $(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;
        });
});

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

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