影响JavaScript / CSS的HTML空间格式

HTML space format affecting JavaScript/CSS

本文关键字：HTML 空间 格式 CSS JavaScript 影响      更新时间：2023-09-26

发生了什么...如果您更改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"。

如何使用PhoneGap获取适用于Android的可折叠列表视图

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

clickedTitle.parentNode.childNodes[1];

你真正想要的是children[1]

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

clickedTitle.parentNode.children[1];

有关childNode和child之间的更多区别，您可以看到此链接：

JavaScript 中的 child 和 childNode 有什么区别？

添加空格会更改 DOM 中的childNodes[1]。这更可靠，不受空格的影响。

var contentC = clickedTitle.parentNode.getElementsByClassName("collapsibleContent")[0];

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

因为您正在基于空格对字符串进行标记化，然后使用第二个标记化字符串来更新此代码中的标题：

var mysplittedtitle = clickedTitle.innerHTML.split(" ");
var newTitle = "- " + mysplittedtitle[1];

添加空格会更改标题字符串的位置。 请注意，如果您在"title"之后添加一个空格并且它不会消失，因为您没有更改字符串数组"title"所在的元素。

修复它的一种方法是在"标题"周围添加一个跨度，如下所示：

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

然后将您的 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 mysplittitle = document.getElementById("title").innerHTML();
    var newTitle = "- " + mysplittitle;
    clickedTitle.innerHTML = newTitle;
  } else {
    contentC.style.display = 'none';
    var mysplittitle = document.getElementById("title").innerHTML();
    var newTitle = "+ " + mysplittitle;
    clickedTitle.innerHTML = newTitle;
  }
}

http://jsfiddle.net/5fdo2yzt/

相关文章：