Пытаться открыть ящик с помощью javascript

Question

Я пытаюсь открыть и закрыть ящик с помощью jquery/javascript, чтобы изменить высоту ящика с 25px (где он скрыт за другим элементом) до 250px, где он открывается и видно. У меня стрелка вверх, которая действует как кнопка. Он переключает класс, чтобы стать стрелкой вниз, когда выдвигается ящик. Каждая вещь в стрелочной части кода работает. По какой-то причине часть со стрелкой вниз не работает, и ящик не закрывается. У меня есть подозрительное подозрение, что это связано с тем, что я пытаюсь добавить событие click в класс, который еще не добавлен в DOM, но я не уверен, правильно ли это. Даже если это правильно, я не знаю, как это исправить. Есть идеи?

$('.arrow-up').click(function() { 
     $('.portfolio-details').css('height',250); 
     $('.portfolio-details h2 span').removeClass('arrow-up'); 
     $('.portfolio-details h2 span').addClass('arrow-down'); 
     }); 

    $('.arrow-down').click(function() { 
     $('.portfolio-details').css('height',25); 
     $('.portfolio-details h2 span').addClass('arrow-up'); 
     $('.portfolio-details h2 span').removeClass('arrow-down'); 
     }); 

Answer 1

событие делегации Try, поскольку вы работаете с динамическим селекторе значения

$(document).on('click', '.arrow-up', function() { 
    $('.portfolio-details').css('height',250); 
    $('.portfolio-details h2 span').removeClass('arrow-up'); 
    $('.portfolio-details h2 span').addClass('arrow-down'); 
    }); 

$(document).on('click', '.arrow-down', function() { 
    $('.portfolio-details').css('height',25); 
    $('.portfolio-details h2 span').addClass('arrow-up'); 
    $('.portfolio-details h2 span').removeClass('arrow-down'); 
    });