Formato dello spazio HTML che interessa JavaScript/CSS

Question

Cosa sta succedendo ... se si modifica la spaziatura o le interruzioni di riga tra tag diversi all'interno dell'HTML, si creano problemi per JavaScript o CSS (non proprio sicuro quale).

Il codice stesso è un elenco comprimibile di base che utilizza solo HTML, JavaScript e CSS. Mi rendo conto che puoi farlo con jquery ecc. Ecc. Sto solo cercando di ottenere una spiegazione per questo codice. Se fai clic sul link jsfiddle in basso, eseguilo e fai clic sul titolo che verrà espanso e compresso al clic. Tidy o cambia la spaziatura e corri di nuovo - scompare al clic.

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; 
    } 
} 

Qualsiasi aiuto o pensieri sarebbe molto apprezzato.

-

Codice originale va a "Th0rndike" al post qui sotto.

how to get collapsible listview for android using phonegap

Answer 1

quando si cambia lo spazio o l'aggiunta di nuova linea si cambierà il childNode

clickedTitle.parentNode.childNodes[1]; 

cosa si vuole veramente è il children[1]

così si potrebbe modificare il codice di questo

clickedTitle.parentNode.children[1]; 

per più della differenza tra childNode ed i bambini si può vedere questo link:

What is the difference between children and childNodes in JavaScript?

Answer 2

spazi aggiungo i cambiamenti ciò childNodes[1] è nel DOM. Questo è più affidabile e non è influenzato dagli spazi.

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

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

Answer 3

perché si sta creazione di token la stringa sulla base di uno spazio e quindi utilizzando la seconda stringa token per l'aggiornamento del titolo questo codice:

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

aggiungendo uno spazio cambia la posizione della stringa del titolo. Notare se si aggiunge uno spazio dopo il "titolo" e non scompare, poiché non è stato modificato l'elemento dell'array di corde "titolo".

un modo per risolvere il problema sarebbe aggiungere un arco intorno "titolo" come questo:

<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> 

quindi modificare il tuo javascript per questo

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/