2016-04-21 1 views
5

發生了什麼......如果更改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

回答

1

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

clickedTitle.parentNode.childNodes[1]; 

你真正想要的是children[1]

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

clickedTitle.parentNode.children[1]; 

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

What is the difference between children and childNodes in JavaScript?

1

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

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

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

1

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

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/