javascript - 在joomla中切换div js不起作用

Question

我的切换 div js 在 joomla 中不起作用。当 js 代码在页面头部时它工作正常，当它在外部文件中时它不会。我所有的链接似乎都很好：

Joomla 模板 - Index.php：

<?php
$document = &JFactory::getDocument();
$document->addScript( '/js/togglediv.js' )
 ?>

Joomla 模板 - templateDetails.xml：

<filename>js/togglediv.js</filename>

切换div.js：

function toggle() {
var ele = document.getElementById("box");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
        ele.style.display = "none";
    text.innerHTML = "show";
}
else {
    ele.style.display = "block";
    text.innerHTML = "hide";
}

}

HTML：

<div id="footer">
<a id="displayText" href="javascript:toggle();">show</a>    
<div id="box">hello</div>
</div>

CSS：

#box {
width: 304px;
height: 40px;
float: left;
position: relative;
border: 1px solid green;
display: none;
}

谢谢！

Answer 1

您需要提供 的完整地址addScript()。为此使用 JURI：

$document->addScript( JURI::Root().SERVER_PATH_TO_JS_FOLDER.'/js/togglediv.js' )

您在 HTML 中的 JS 有点偏离。尝试这个：

<a id="displayText" href="javascript:void(0);" onclick="toggle()">show</a>

似乎也没有任何东西id box。