javascript - 影响 JavaScript/CSS 的 HTML 空间格式

Question

这是怎么回事...如果您更改 HTML 中不同标记之间的间距或换行符，则会导致 JavaScript 或 CSS 出现问题(不确定是哪一个)。

代码本身是一个基本的可折叠列表，仅使用 HTML、JavaScript 和 CSS。我知道你可以用 jquery 等来做到这一点。只是想得到这段代码的解释。如果您单击下面的 jsfiddle 链接，运行它，然后单击标题，它将在单击时展开和折叠。整理或更改间距并再次运行 - 单击时消失。

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

HTML

<div class='collapsibleCont'><h3 id='collapsible1' class='collapsibleTitle' onclick="handleCollapsible('collapsible1')">+ title</h3><p style="display:none" class='collapsibleContent'>hello</p>

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

Answer 1

当更改空间或添加新行时，您将更改 childNode

clickedTitle.parentNode.childNodes[1];

你真正想要的是 children[1]

所以你可以把代码改成这样

clickedTitle.parentNode.children[1];

关于 childNode 和 children 之间的更多区别，您可以查看此链接:

What is the difference between children and childNodes in JavaScript?