0

我在将 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>
4

1 回答 1

0

您上面的标记缺少 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

于 2013-11-12T15:55:18.217 回答