jquery 显示/隐藏在 wordpress 上不起作用

Question

我有一个我正在开发的网站http://trueproperty.org/，在首页我有两个 div，一个是#excerpt，另一个是#content。 #content 填充使用 <?php the_excerpt(); ?> <button id="readmore">Continue Reading...</button> 并且#excerpt 填充使用 <?php the_content(); ?>.

内容设置为display:none。现在我使用此代码显示#content 并在用户单击继续阅读时隐藏#excerpt，它适用于jsbin，但不适用于actual site，我无法弄清楚：/。

<script type="text/javascript">
$(document).ready(function(){
  $("#readmore").click(function(){
            $('#content').show('slow');
        $('#excerpt').hide('fast');
 });
});
            </script>

Answer 1

在实际使用 jQuery 对象之前，您似乎没有引用 Jquery 库。尝试将代码放在：

<script type='text/javascript' src='http://trueproperty.org/wp-includes/js/jquery/jquery.js?ver=1.7.1' />

Answer 2

您正在加载两个使用 $ 作为别名的文件 ..

以下作品：

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#readmore").click(function(){
        jQuery('#content').show('slow');
    jQuery('#excerpt').hide('fast');
});
});
        </script>

不过最好找冲突问题，用jQuery.noConflict

Answer 3

将此代码放在Head 标记的末尾。

<script type="text/javascript">
 $(document).ready(function(){
   $("#readmore").click(function(){
     $('#content').show('slow');
     $('#excerpt').hide('fast');
   });
 });
</script>