javascript - 如何减少 div onclick 的高度？

Question

我正在使用以下内容来增加单击时 div 的高度，但如果再次单击链接，我需要将高度恢复为原始高度。

代码：

$(document).ready(function() {
    $('.anchor_clicker').click(function(){
    $('#increaseth_the_height').animate({height:'930'})
})
    });

Answer 1

尝试将其存储在元素上并基于此进行切换。这假设您只有 1 个带有 .anchor_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'})
    }
  })
});

Answer 2

像这样的东西：

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

Answer 3

一种方法是记住“点击”状态并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;   
        }
    })
});

Answer 4

我将添加一个，只是为了在那里有效率论点：

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

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