javascript - toggleClass 用于执行两种不同的 scrollTop 方法，不起作用

Question

所以我运行了以下函数并且效果很好。选中的div通过.slideToggle()函数展开，页面通过.animate()和向body下滑。 scrollTop() 方法。

$('.pfitem').click(function(){
        $(this).toggleClass('minimized maximized');
        $(this).next().toggleClass('minimized maximized');
        $(this).next().slideToggle(1200);            
        });

$('.pfitem.minimized').click(function(){
        $('html, body').animate({
        scrollTop: $(this).next().offset().top
        }, 1200);            
        });

现在，当我尝试添加以下代码时，根据我的理解，应该将页面滑回 div，id 为 #portfolio 它什么也不做，即使现在 .click() 函数所针对的 div 的类已切换为 .pfitem.maximized，因此之前的.click() 函数不应干扰。

$(".pfitem.maximized").click(function() {
        $('html, body').animate({
        scrollTop: $('#portfolio').offset().top
        }, 1200);
});

这是我的 HTML 片段，我试图从中删除不相关的信息(我正在使用 bootstrap 并在代码中留下了一些 bootstrap 类)

<div class="page" id="portfolio">
    <div class="content container">
      
        <ul class="row npr">
            <li class="container col-xs-12 col-sm-4 col-md-3 pfitem businesscards minimized">
                <div class="orangeover">
                    <span>Business Cards</span>
                </div>
            </li>
          
            <div class="container col-xs-12 maximizeitem minimized" id="businesscards">
                <div class="maxicontent col-sm-4">
                    <h4>BUSINESS CARDS</h4>
                        <p>Some text goes here</p>
                        <p>Some text goes here</p>
                </div><!-- maxicontent -->
                <div class="maxiimages col-sm-8">
                    <button class="close"><span class="">X</span></button>
                    <img src="" class="">
                </div><!-- maxiimages -->
            </div><!-- container maximizeitem -->
        </ul>
      
    </div><!-- .content .container -->
</div><!-- #portfolio -->

这是我的第一篇文章，希望我提供了足够的信息。

谢谢

Answer 1

由于您希望动态评估选择器，因此您必须使用事件委托(delegate)

$(document).on('click', '.pfitem', function () {
    $(this).toggleClass('minimized maximized');
    $(this).next().toggleClass('minimized maximized');
    $(this).next().slideToggle(1200);
});

$(document).on('click', '.pfitem.minimized', function () {
    $('html, body').animate({
        scrollTop: $(this).next().offset().top
    }, 1200);
});