Question

我想点击“expando”在其状态之间切换：展开和折叠。

我还是DOM / JS的新手，所以我的风格可能很糟糕;如果你有任何风格指南让我知道，但现在我想让代码工作。我尝试了几种不同的方法，例如在dom的{{1}}中设置展开或折叠行为（并在onclick和expand函数中更改它），但是如果我这样做，那么由于某种原因点击不会触发崩溃，但它会触发扩展。

下面代码的问题是我可以扩展一个expando，但是当我点击它时，也会触发崩溃，所以它会扩展然后立即折叠回来。

collapse

我正在测试的示例HTML：

var expandos = document.getElementsByTagName("expando");
var uid = 0;
for(var i=0; i<expandos.length; ++i) {
    var dom = expandos[i];
    dom.id = "expando_"+uid++;

    var iframe = document.createElement("iframe");
    iframe.src = dom.innerHTML;
    iframe.name = dom.id +".big";
    iframe.id = iframe.name;
    iframe.scrolling = "no";
    iframe.style.display = "inline";
    iframe.onclick = collapse(dom);

    var p = document.createElement("p");
    var text = document.createTextNode(dom.innerHTML);
    p.id = dom.id+".small";
    p.style.display = "inline";
    p.appendChild(text);
    p.onclick = expand(dom);

    dom.innerHTML = "";
    /*  We have to clear the innerHTML to prevent the original text from
        showing up in addition to the text added by p.
    */

    dom.appendChild(iframe);
    dom.appendChild(p);
    /*  We have to append iframe and p **after** we clear innerHTML
        because otherwise clearing innerHTML will clear the appended
        children.
    */
    function expand(dom) {
        return function() {
            alert("Expanding "+dom.id);
            var iframe = document.getElementById(dom.id+".big");
            var p = document.getElementById(dom.id+".small");
            p.style.display = "none";
            iframe.style.display = "initial";
            dom.onclick = collapse(dom);
        }
    }
    function collapse(dom) {
        return function() {
            alert("Collapsing "+dom.id);
            var iframe = document.getElementById(dom.id+".big");
            var p = document.getElementById(dom.id+".small");
            p.style.display = "initial";
            iframe.style.display = "none";
            dom.onclick = expand(dom);
        }
    }
    collapse(dom)();
}

在同一目录中，我有一个名为“快速棕色”和“懒狗”的文件，它们可以正常扩展。

Answer 1

获得所需基本功能的快速解决方法是将展开和折叠组合到一个函数中，并使用if / else块来检查状态。不是100％导致原始问题的原因，但我猜它与你的onClick事件没有被清除有关。

    function clickHandler(dom) {
    return function() {
        var iframe = document.getElementById(dom.id+".big");
        var p = document.getElementById(dom.id+".small");

        if(p.style.display === "initial"){
            p.style.display = "none";
            iframe.style.display = "initial";
        } else {
            p.style.display = "initial";
            iframe.style.display = "none";
        }

标签onclick被处理两次

1 个答案: