Question

我有一个关于将Jquery代码从w3schools转移到我的Wordpress网站的问题。实际上它在w3schools中正常工作但是当我尝试在我的wordpress网站上传输时，输出只显示了大约一毫秒。

任何帮助都非常感谢！谢谢！

顺便说一下，这是我的代码：

    <!DOCTYPE html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  $("#topbar").toggle(function(){
    $(this).animate({height:200},200);
  }, 
  function(){
    $(this).animate({height:40},200);
  });
});
$(document).ready(function(){
  $("#topsbar").toggle(function(){
    $(this).animate({height:100},200);
  }, 
  function(){
    $(this).animate({height:40},200);
  });
});
</script>

<style type="text/css">
#topbar { width: 100%; height: 40px; background-color: #000; color: #FFF;overflow:hidden;}
#topsbar { width: 100%; height: 40px; background-color: #000; color: #FFF;overflow:hidden;}
</style>


<div id="topbar"> Table<br/>
<br/>
<table width=100% border=1>
<tr align=center>
<td>Time</td>
<td>Time</td>
<td>Time</td>
</tr>
<tr align=center>
<td>Date</td>
<td>Date</td>
<td>Date</td>
</tr>
<tr align=center>
<td>Age</td>
<td>Age</td>
<td>Age</td>
</tr>
<tr align=center>
<td>Place</td>
<td>Place</td>
<td>Place</td>
</tr>
</table></div>
<br/>
<div id="topsbar"> Table </div>

Answer 1

上面的标记缺少html，head，body和meta标记

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Untitled Document</title>

    <style type="text/css">
    #topbar {
        width: 100%;
        height: 40px;
        background-color: #000;
        color: #FFF;
        overflow: hidden;
    }

    #topsbar {
        width: 100%;
        height: 40px;
        background-color: #000;
        color: #FFF;
        overflow: hidden;
    }
    </style>

    </head>
    <body>

    <div id="topbar"> Table<br/>
        <br/>
        <table width=100% border=1>
            <tr align=center>
                <td>Time</td>
                <td>Time</td>
                <td>Time</td>
            </tr>
            <tr align=center>
                <td>Date</td>
                <td>Date</td>
                <td>Date</td>
            </tr>
            <tr align=center>
                <td>Age</td>
                <td>Age</td>
                <td>Age</td>
            </tr>
            <tr align=center>
                <td>Place</td>
                <td>Place</td>
                <td>Place</td>
            </tr>
        </table>
    </div>
    <br/>
    <div id="topsbar"> Table </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
    <script type="text/javascript">
    $(document).ready(function(){

      $("#topbar").toggle(function(){
        $(this).animate({height:200},200);
        }, 
        function(){
        $(this).animate({height:40},200);
      });

      $("#topsbar").toggle(function(){
        $(this).animate({height:100},200);
        }, 
        function(){
        $(this).animate({height:40},200);
      });

    }); // end ready()
    </script>

    </body>
</html>

你也只需要一个jQuery ready（）处理程序，因为你只有2个toggle（）方法应该进入它里面

我无法看到您的WordPress网站，但您会使用脚本标记并使用WordPress wp_enqueue_script() 方法将其添加到WordPress

<强> http://codex.wordpress.org/Function_Reference/wp_enqueue_script

然后将样式CSS添加到WordPress主题 style.css

将我的jquery代码从w3school编辑器传输到我的wordpress网站

1 个答案: