滑动页脚的jQuery脚本有问题 - Having problems with jQuery script for sliding footer

Having problems with jQuery script for sliding footer

本文关键字：jQuery 脚本有问题 | 更新日期: 2023-09-26

好的，所以我试图使一个弹出滑动页脚使用jQuery，我已经设置了html和css，但我有麻烦使jQuery脚本工作。脚本文件是/js/slidingfooter.js，它看起来像这样:

jQuery(function($) {
var open = false;
$('#footerSlideButton').click(function() {
    if(open === false) {
        $('#footerSlideContent').animate({ height: '300px' });
        $(this).css('backgroundPosition', 'bottom left');
        open = true;
    } else {
        $('#footerSlideContent').animate({ height: '0px' });
        $(this).css('backgroundPosition', 'top left');
        open = false;
    }
});     
});

我试着在functions.php文件中调用它，像这样:

function add_my_script() {
    wp_enqueue_script(
        'slidingfooter',
        get_template_directory_uri() . '/js/slidingfooter.js',
        array('jquery') 
    );
}

但是所有这些都是当我刷新页面时，它显示functions.php中的代码只是在标题上方显示编写的代码。

我不知道我做错了什么

问题是您正在调用返回javascript的php。Mime类型不是php文档与javascript相关，而是与html相关。所以，我可以在这里看到两个解决方案，
1)将javascript代码包装在off

内

<script type="text/javascript">
    jQuery(function($) {
    var open = false;
    $('#footerSlideButton').click(function() {
        if(open === false) {
            $('#footerSlideContent').animate({ height: '300px' });
            $(this).css('backgroundPosition', 'bottom left');
            open = true;
        } else {
            $('#footerSlideContent').animate({ height: '0px' });
            $(this).css('backgroundPosition', 'top left');
            open = false;
        }
    });     
    });
</script>

或(更好的方式)
2)在当前html文档中插入javascript代码，方法如上(1)。
你也可以通过点击按钮或者使用time

触发它