用于滑动页脚的jQuery脚本有问题(Having problems with jQuery script for sliding footer)

用于滑动页脚的jQuery脚本有问题(Having problems with jQuery script for sliding footer)

好吧我正在尝试使用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显示代码，只显示标题上方的编写代码。

我不知道我做错了什么。

Ok so I am trying to make a pop up sliding footer using jQuery, I have set up the html and css but I'm having trouble making the jQuery script work. The script file is /js/slidingfooter.js and it looks like this:

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

I tried calling it in the functions.php file like this:

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

But all that does is when I refresh the page it displays the code in functions.php just shows the written code just above the header.

I don't know what I'm doing wrong.

最满意答案

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

<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）用上面的方法（1）将你的javascript代码插入到当前的html文档中。 您也可以通过单击按钮或使用时间触发它

The problem is that you are calling a php that returns javascript. Mime types are not relate php documents with javascript, but with html. SO, i can see two solutions here, 1) Wrap your javascript code inside 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>

or (better way) 2) Insert your javascript code inside the current html document with the way above(1). You can also trigger it on a button click or using time