Question

我正在使用以下内容来增加点击div的高度，但如果再次点击链接，我需要将高度重新设置为原始值。

CODE：

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

Answer 1

尝试将其存储在元素＆amp;基于此切换。这假设您只有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);
        }
    });
});

我个人更喜欢类方法，但是每个人都喜欢它们。

如何降低div的高度？

4 个答案: