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

标签 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,我不介意走那条路。

最佳答案

它是否适用于其他浏览器?

你能jsfiddle.net对于当前的功能,因为很难理解此类代码拍摄中的问题上下文...

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

 document.getElementById('method') 

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

更新:在 jsfiddle 中查看示例之后

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

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

关于Javascript 隐藏和显示 div 的动态内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19235515/

相关文章:

javascript - 有没有办法从节点红色转移到纯代码?

javascript - 识别 Service Worker 缓存中的陈旧缓存条目

Javascript .on 事件处理程序

javascript - 在发布表单之前在输入文本框中显示日期?

jquery - .val() 无法按预期使用按钮。输入[类型=按钮]

javascript - 将 FireBug 用于带框架的网站

javascript - Chrome扩展回调函数和并发

javascript - 事件在 FireFox 中未定义,但在 Chrome 和 IE 中可以

javascript - 显示内联 block li 元素时 Chrome 中的错误

javascript - css 标签 "-webkit-min-device-pixel-ratio"是如何在 Javascript 中实现的?