試圖切換抽屜打開和關閉與JavaScript

Question

我試圖打開和關閉抽屜使用jquery/javascript來改變抽屜的高度從25px（它隱藏在另一個元素後面）到250px它彈出打開和是可見的。我有一個向上箭頭，作爲一個按鈕。它會在抽屜打開時將類切換爲向下箭頭。代碼的向上箭頭部分中的所有內容都適用。出於某種原因，向下箭頭部分不起作用，抽屜不能關閉。我有一個偷偷摸摸的懷疑，這是因爲我試圖添加一個單擊事件到一個尚未添加到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

嘗試事件委託，因爲你是用動態選擇工作的重視

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