HTML-Space-Format, das JavaScript/CSS betrifft

Question

Was geschieht ... Wenn Sie den Abstand oder die Zeilenumbrüche zwischen verschiedenen Tags innerhalb des HTML ändern, verursacht dies Probleme für das JavaScript oder CSS (nicht wirklich sicher welches).

Der Code selbst ist eine einfache zusammenklappbare Liste, die nur HTML, JavaScript und CSS verwendet. Mir ist klar, dass du das mit jquery usw. machen kannst. Ich versuche nur, eine Erklärung für diesen Code zu bekommen. Wenn Sie auf den jsfiddle-Link unten klicken, führen Sie ihn aus, und klicken Sie auf den Titel, den er beim Klicken vergrößert und minimiert. Aufräumen oder Abstand ändern und erneut ausführen - verschwindet beim Klicken.

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

Jede Hilfe oder Gedanken würde sehr geschätzt werden.

-

Originalcode geht auf "Th0rndike" im Beitrag unten.

how to get collapsible listview for android using phonegap

Answer 1

beim Wechsel der Raum oder das Hinzufügen neuer Zeile zeigt die Änderung childNode

clickedTitle.parentNode.childNodes[1]; 

, was Sie wirklich wollen, ist die children[1]

so könnten Sie den Code ändern zu dies

clickedTitle.parentNode.children[1]; 

für mehr von der Differenz zwischen childNode und Kindern, die Sie auf diesen Link sehen:

What is the difference between children and childNodes in JavaScript?

Answer 2

Hinzufügen von Räumen verändert, was childNodes[1] im DOM ist. Dies ist zuverlässiger und wird nicht von Leerzeichen beeinflusst.

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

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

Answer 3

, weil Sie die Zeichenfolge Zeichenüber basierend auf einen Platz in und dann unter Verwendung der zweiten Token versehen Zeichenfolge für die Aktualisierung des Titels dieser Code:

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

einen Raum Zugabe ändert sich die Position der Titelzeichenfolge. Beachten Sie, wenn Sie nach Ihrem "Titel" ein Leerzeichen hinzufügen und es nicht verschwindet, da Sie nicht geändert haben, welches Element des Zeichenfolgen-Arrays "title" ist.

eine Art und Weise zu beheben es eine Spanne hinzufügen würde um "Titel" wie folgt aus:

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

dann Javascript diesem

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/

ändern