影响JavaScript / CSS的HTML空间格式

发布时间：2020-12-14 22:36:23 所属栏目：资源来源：网络整理

导读：发生了什么如果你改变HTML中不同标签之间的间距或换行符,就会导致JavaScript或CSS出现问题(不确定哪一个). 代码本身是仅使用HTML,JavaScript和CSS的基本可折叠列表.我意识到你可以用jquery等来做这件事.只是试图得到这个代码的解释.如果单击下面的jsfiddle链

发生了什么……如果你改变HTML中不同标签之间的间距或换行符,就会导致JavaScript或CSS出现问题(不确定哪一个).

代码本身是仅使用HTML,JavaScript和CSS的基本可折叠列表.我意识到你可以用jquery等来做这件事.只是试图得到这个代码的解释.如果单击下面的jsfiddle链接,运行它,然后单击它将展开的标题,然后单击折叠.整理或更改间距并再次运行 – 单击时消失.

http://jsfiddle.net/7WPs6/46/

HTML


JavaScript的

function handleCollapsible(id) {
    var clickedTitle = document.getElementById(id);
    var contentC = clickedTitle.parentNode.childNodes[1];
    if (contentC.style.display == 'none') {
        contentC.style.display = 'block';
        var mysplittedtitle = clickedTitle.innerHTML.split(" ");
        var newTitle = "- " + mysplittedtitle[1];
        clickedTitle.innerHTML = newTitle;
    } else {
        contentC.style.display = 'none';
        var mysplittedtitle = clickedTitle.innerHTML.split(" ");
        var newTitle = "+ " + mysplittedtitle[1];
        clickedTitle.innerHTML = newTitle;
    }
}

任何帮助或想法将不胜感激.
 – 
原始代码在下面的帖子中转到“Th0rndike”.
how to get collapsible listview for android using phonegap


最佳答案
更改空间或添加新行时,您将更改childNode

clickedTitle.parentNode.childNodes[1];

你真正想要的是孩子们[1]
所以你可以改变代码

clickedTitle.parentNode.children[1];

有关childNode和children之间的更多区别,您可以看到此链接：
What is the difference between children and childNodes in JavaScript?
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!