Як зменшити висоту div onclick?

Я використовую наступне, щоб збільшити висоту div на клік, але мені потрібен висота, щоб відновити оригінал, якщо посилання ще раз натиснуто.

КОД:

$(document).ready(function() {
    $('.anchor_clicker').click(function(){
    $('#increaseth_the_height').animate({height:'930'})
})
    });
0
@ hjpotter92 Чи все ще дійсно? Відповідно до документації для перемикання , він не приймає ці параметри? Відповідно до цю документацію вона не підтримується.
додано Автор Precastic, джерело

6 Відповіді

Одним із способів зробити це було б запам'ятати "натиснуте" стан і зробити 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;   
        }
    })
});
1
додано

Одним із способів зробити це було б запам'ятати "натиснуте" стан і зробити 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;   
        }
    })
});
1
додано

Я додам один, просто матиме тут аргумент ефективності:

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

Особисто я віддаю перевагу методу класу, але кожному своїм.

1
додано
Так, я не знав, яку версію він використовував. Я додав метод класу, який я теж я точно визначив.
додано Автор PlantTheIdea, джерело
Цей спосіб виклику toggle() не підтримується як 1.8 і не існує в 1.9+ Дивіться тут
додано Автор Precastic, джерело

Я додам один, просто матиме тут аргумент ефективності:

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

Особисто я віддаю перевагу методу класу, але кожному своїм.

1
додано
Так, я не знав, яку версію він використовував. Я додав метод класу, який я теж я точно визначив.
додано Автор PlantTheIdea, джерело
Цей спосіб виклику toggle() не підтримується як 1.8 і не існує в 1.9+ Дивіться тут
додано Автор Precastic, джерело

Try storing it against the element & toggling based on that. This assumes you only have 1 element with the .anchor_clicker class:

$(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
додано

Щось на зразок цього:

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
    }
})
    });
1
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram