Javascript 如何降低div onclick的高度？

我正在使用下面的方法来增加单击时div的高度，但是如果再次单击链接，我需要将高度改为原始高度

代码：

---

尝试将其存储在元素上&并基于此进行切换。这假设只有1个元素具有.anchor\u clicker类：

$(document).ready(function() {
  $('.anchor_clicker').click(function(){
    if( $('.anchor_clicker').data('stored-height') == 930 ) {
      $('.anchor_clicker').data('stored-height','100');
      $('#increaseth_the_height').animate({height:'100'})
    } else {
      $('.anchor_clicker').data('stored-height','930');
      $('#increaseth_the_height').animate({height:'930'})
    }
  })
});

---

尝试将其存储在元素上&并基于此进行切换。这假设只有1个元素具有.anchor\u clicker类：

$(document).ready(function() {
  $('.anchor_clicker').click(function(){
    if( $('.anchor_clicker').data('stored-height') == 930 ) {
      $('.anchor_clicker').data('stored-height','100');
      $('#increaseth_the_height').animate({height:'100'})
    } else {
      $('.anchor_clicker').data('stored-height','930');
      $('#increaseth_the_height').animate({height:'930'})
    }
  })
});

大概是这样的：

var isExpanded=false;
$(document).ready(function() {
    $('.anchor_clicker').click(function(){
    if(isExpanded==false)
    {
         $('#increaseth_the_height').animate({height:'930'})
         isExpanded=true
    } else
    {
         $('#increaseth_the_height').animate({height:'ORIGANAL'})
         isExpanded=false
    }
})
    });

大概是这样的：

var isExpanded=false;
$(document).ready(function() {
    $('.anchor_clicker').click(function(){
    if(isExpanded==false)
    {
         $('#increaseth_the_height').animate({height:'930'})
         isExpanded=true
    } else
    {
         $('#increaseth_the_height').animate({height:'ORIGANAL'})
         isExpanded=false
    }
})
    });

---

一种方法是记住“单击”状态，然后执行

if

来确定是缩小还是增大div

$(document).ready(function() {
    var clicked = 0;
    $('.anchor_clicker').click(function(){
        if(clicked === 0){
             $('#increaseth_the_height').animate({height:'930'})
             clicked = 1;
        }
        else {
            $('#increaseth_the_height').animate({height:'300'}) //or whatever the orig height was
            clicked = 0;   
        }
    })
});

---

一种方法是记住“单击”状态，然后执行

if

来确定是缩小还是增大div

$(document).ready(function() {
    var clicked = 0;
    $('.anchor_clicker').click(function(){
        if(clicked === 0){
             $('#increaseth_the_height').animate({height:'930'})
             clicked = 1;
        }
        else {
            $('#increaseth_the_height').animate({height:'300'}) //or whatever the orig height was
            clicked = 0;   
        }
    })
});

---

我将添加一个，只是为了在其中包含效率论证：

$(function(){
    function animateHeight($item,ht,spd){
        $item.stop().animate({height:ht},spd);
    }

    $("#topbar-show").click(function(){
        $(this).toggle(function(){
            animateHeight($(this),40,200);
        },function(){
            animateHeight($(this),10,200);
        });
    });
});

我添加了

.stop（）

方法来防止动画排队，并利用动画制作了一个函数，允许灵活地在任意多的对象上使用动画

如果

.toggle（）

函数不符合您的喜好，则始终可以使用类：

$(function(){
    function animateHeight($item,ht,spd){
        $item.stop().animate({height:ht},spd);
    }

    $("#topbar-show").click(function(){
        if($(this).hasClass('clicked')){            
            $(this).removeClass('clicked');
            animateHeight($(this),10,200);
        } else {                  
            $(this).addClass('clicked');      
            animateHeight($(this),40,200);
        }
    });
});

---

我个人更喜欢class方法，但每个方法都有自己的方法。

我将添加一个，只是为了在其中包含效率参数：

$(function(){
    function animateHeight($item,ht,spd){
        $item.stop().animate({height:ht},spd);
    }

    $("#topbar-show").click(function(){
        $(this).toggle(function(){
            animateHeight($(this),40,200);
        },function(){
            animateHeight($(this),10,200);
        });
    });
});

我添加了

.stop（）

方法来防止动画排队，并利用动画制作了一个函数，允许灵活地在任意多的对象上使用动画

如果

.toggle（）

函数不符合您的喜好，则始终可以使用类：

$(function(){
    function animateHeight($item,ht,spd){
        $item.stop().animate({height:ht},spd);
    }

    $("#topbar-show").click(function(){
        if($(this).hasClass('clicked')){            
            $(this).removeClass('clicked');
            animateHeight($(this),10,200);
        } else {                  
            $(this).addClass('clicked');      
            animateHeight($(this),40,200);
        }
    });
});

---

我个人更喜欢class方法，但每个方法都有自己的方法。

@hjpotter92这仍然有效吗？根据调查，它不接受这些参数吗？据我所知，它已被弃用。@hjpotter92这仍然有效吗？根据调查，它不接受这些参数吗？从1.8开始，这种调用toggle（）的方法就被弃用了&在1.9+版本中不存在是的，我不知道他使用的是哪个版本。我添加了基于类的方法，我也明确表示我更喜欢这种方法。从1.8开始，这种调用toggle（）的方法就被弃用了&在1.9+中不存在是的，我不知道他使用的是哪个版本。我添加了基于类的方法，我也明确表示我更喜欢这种方法。