Javascript隐藏和显示div的动态内容

时间:2013-10-07 21:57:14

标签: javascript jquery html css

目前我隐藏并显示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,我不介意沿着这条路走下去。

3 个答案:

答案 0 :(得分:1)

它可以在其他浏览器中使用吗?

你可以jsfiddle.net获得当前的功能,因为在这样的代码拍摄中很难理解问题的背景......

有很多建议:)但我有强烈的感觉

 document.getElementById('method') 

返回错误的元素或此元素未放在mainHolder

更新在jsfiddle中查看示例后

对错误元素的感觉是正确的:)将“方法”更改为“信息”

document.getElementById('method') -> document.getElementById('info')

答案 1 :(得分:0)

我认为你想在myFunc中使用document.getElementById(' content ')而不是document.getElementById('method')。

答案 2 :(得分:0)

我觉得这段代码没什么问题。但是,您可以探索的猜测是改变线条 content.style.display = "none";

可能是这样的情况:显示你的html(webview或浏览器本身)可能正在擦除elemtns的内容,因为显示设置为none