[英]Javascript hiding and showing dynamic content of a div
目前我隐藏并显示div的内容,如下所示:
var header = null;
var content = null;
var mainHolder = null;
var expandCollapseBtn = null;
var heightValue = 0;
header = document.getElementById("header");
content = document.getElementById("content");
mainHolder = document.getElementById("mainHolder");
expandCollapseBtn = header.getElementsByTagName('img')[0];
heightValue = mainHolder.offsetHeight;
header.addEventListener('click', handleClick, false);
mainHolder.addEventListener('webkitTransitionEnd',transitionEndHandler,false);
function handleClick() {
if(expandCollapseBtn.src.search('collapse') !=-1)
{
mainHolder.style.height = "26px";
content.style.display = "none";
}
else
{
mainHolder.style.height = heightValue + "px";
}
}
function transitionEndHandler() {
if(expandCollapseBtn.src.search('collapse') !=-1)
{
expandCollapseBtn.src = "expand1.png";
}
else{
expandCollapseBtn.src = "collapse1.png";
content.style.display = "block";
}
}
如果内容是静态的,这很好,但我试图像这样动态填充我的div。
这是从iphone应用程序调用并用字符串填充div。
var method;
function myFunc(str)
{
method = str;
alert(method);
document.getElementById('method').innerHTML = method;
}
我将字符串全局存储在变量方法中。 我遇到的问题是,当我尝试扩展div时,我刚刚崩溃,那里什么都没有。 是否有某种方法可以使用存储在var中的信息重新填充div,然后再将其展开? 我已经尝试插入它,就像我在函数中一样,但它不起作用。
有没有人有任何想法?
复制:
这是jsfiddle。 jsfiddle.net/6a9B3如果您在此处输入文字
它会工作正常。 我不确定如何在这个jsfiddle中只用一个字符串调用myfunc,但如果你能弄清楚如何做到这一点,你会看到它第一次加载好,但当你折叠部分并尝试重新打开时它,它不会工作。如果解决这个问题的唯一方法是使用jquery,我不介意沿着那条路走下去。
它在其他浏览器中工作吗?
你可以jsfiddle.net目前的功能,因为在这样的代码拍摄中很难理解问题的背景...
有很多建议:)但我有强烈的感觉
document.getElementById('method')
返回错误的元素或未放在mainHolder中的此元素
更新 : 在jsfiddle中查看示例之后
感觉错误的元素是正确的:)改变'方法'到'信息'
document.getElementById('method') -> document.getElementById('info')
我想你想在myFunc中使用document.getElementById(' content ')而不是document.getElementById('method')。
我觉得这段代码没什么问题。 但是,您可以探索的猜测是改变行content.style.display = "none";
可能是这样的情况,显示你的html(webview或浏览器本身)可能正在擦除elemtns的内容,因为显示设置为none
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.