0

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

1 に答える 1

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');
    });
于 2013-06-21T03:51:22.193 に答える