javascript - 折叠/展开脚本不起作用

Question

我没有使用 Javascript 编码的经验。但是，我愿意学习。

我看到了一些创建折叠/展开的教程 <div> block 。我已经用 jsfiddle 测试了代码。您可以查看代码 here

它工作正常，忽略样式。但是我不明白为什么代码在实时网站上不起作用。

首先，我在 WordPress 页面编辑器中插入了所有代码 javascript 和 HTML。然后，我在标题中移动了 javascript。我看到了一些关于代码源的信息。我不确定哪个是来源。

这是在 header.php 中插入的 javascript 代码:

<script type="text/javascript" language="javascript" src="http://example.com/wp-content/themes/crimson/scripts/jquery.min.js">
function toggle2(showHideDiv, switchTextDiv) {
    var ele = document.getElementById(showHideDiv);
    var text = document.getElementById(switchTextDiv);
    if (ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "expand";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "collapse";
    }
}

function toggle3(contentDiv, controlDiv) {
    if (contentDiv.constructor == Array) {
        for (i = 0; i < contentDiv.length; i++) {
            toggle2(contentDiv[i], controlDiv[i]);
        }
    }
    else {
        toggle2(contentDiv, controlDiv);
    }
}​
</script>​​​​​​​​​​​​​​​​

HTML 代码与 fiddle 上的相同HTML 面板，它显示在 WordPress 页面中。

请告诉我这段代码有什么问题？它是javascript代码的来源吗？

Chrome 控制台为我提供以下信息:

Uncaught ReferenceError: toggle2 is not defined example.com:103 onclick

最大的问题是为什么代码在 mootools 或 jquery 框架上的 jsfiddle 上运行良好，而在实时站点上却不起作用？

更新:我已经更新了脚本标签。还是不行。

Answer 1

您需要将您的 Javascript 代码放在它自己的标签中。

  <script type="text/javascript" language="javascript" src="http://example.com/wp-content/themes/crimson/scripts/jquery.min.js">
  <script type="text/javascript">

       YOUR CODE HERE

  </script>

此外，由于您使用的是 jQuery，因此需要像这样使用 ready() 函数:

       $(function(){
             YOUR CODE HERE
       });

---

  <a href="#" id="clickme">Click</a>  
  <div id="d1">Some content to hide</div>

在头部:

  <script type="text/javascript">
       $(document).ready(function(){
           $("#clickme").toggle(function(){
               $("#d1").show();
           },
             function(){
                $("#d1").hide();
             }
           );
       });
  </script>

当然，在代码中保留对 jQuery 的引用。