影響JavaScript/CSS的HTML空間格式

發生了什麼......如果更改HTML中不同標記之間的間距或換行符，會導致JavaScript或CSS出現問題（不確定是哪一個）。影響JavaScript/CSS的HTML空間格式

代碼本身是僅使用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

來源

2016-04-21 Zilch

改變空間時，或增加新的生產線，將更改childNode

clickedTitle.parentNode.childNodes[1];

你真正想要的是children[1]

，所以你可以修改代碼，這

clickedTitle.parentNode.children[1];

更多childNode和孩子之間的區別，你可以看到這個鏈接：

What is the difference between children and childNodes in JavaScript?

來源

2016-04-21 18:36:52

添加空格會改變什麼childNodes[1]是在DOM。這更可靠，不受空間的影響。

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

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

來源

2016-04-21 18:36:21

，因爲你是基於空間令牌化的字符串，然後使用第二標記化字符串在更新標題此代碼：

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

添加空格可更改標題字符串的位置。請注意，如果您在「標題」之後添加空格，並且它不會消失，因爲您沒有更改字符串數組「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/

來源

2016-04-21 18:48:40 Steve

影響JavaScript/CSS的HTML空間格式

回答

相關問題