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

尝试事件委派，因为您正在使用动态选择器值

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

尝试使用javascript打开和关闭抽屉

1 个答案: