एचटीएमएल अंतरिक्ष जावास्क्रिप्ट/सीएसएस

Question

क्या हो रहा है ... यदि आप रिक्ति बदलने के लिए या लाइन अलग टैग के बीच HTML के भीतर टूट जाता है को प्रभावित करने वाले प्रारूप, यह जावास्क्रिप्ट या सीएसएस के लिए समस्या है (वास्तव में यकीन नहीं है जो एक) का कारण बनता है।

कोड अपने आप में एक बुनियादी सिमटने केवल HTML, जावास्क्रिप्ट, और सीएसएस का उपयोग कर सूची है। मुझे एहसास है कि आप jquery आदि के साथ ऐसा कर सकते हैं आदि बस इस कोड के लिए स्पष्टीकरण प्राप्त करने का प्रयास कर रहे हैं। यदि आप नीचे दिए गए jsfiddle लिंक पर क्लिक करते हैं, तो इसे चलाएं, और उस शीर्षक पर क्लिक करें जो इसे विस्तारित करेगा और क्लिक पर पतन होगा। साफ या दूरी को बदलें और फिर से चलाएं - क्लिक पर गायब हो जाता है।

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

एचटीएमएल

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

जावास्क्रिप्ट

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

Answer 1

जब अंतरिक्ष को बदलने या नई लाइन जोड़ने आप बदल जाएगा childNode

clickedTitle.parentNode.childNodes[1]; 

क्या आप वास्तव में चाहते हैं children[1]

तो आप करने के लिए कोड बदल सकता है इस

clickedTitle.parentNode.children[1]; 

childNode और बच्चों के बीच अंतर के अधिक के लिए आप इस लिंक को देख सकते हैं:

What is the difference between children and childNodes in JavaScript?

Answer 2

जोड़ना रिक्त स्थान में परिवर्तन क्या childNodes[1] डोम में है। यह अधिक विश्वसनीय है और रिक्त स्थान से प्रभावित नहीं है।

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

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

Answer 3

क्योंकि आप एक अंतरिक्ष के आधार पर स्ट्रिंग tokenizing कर रहे हैं और उसके बाद में शीर्षक अद्यतन करने के लिए दूसरा tokenized स्ट्रिंग का उपयोग यह कोड:

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

स्थान जोड़ने से शीर्षक स्ट्रिंग का स्थान बदल जाता है। ध्यान दें कि यदि आप अपने "शीर्षक" के बाद कोई स्थान जोड़ते हैं और यह अपमान नहीं करता है, क्योंकि आपने स्ट्रिंग सरणी "शीर्षक" का कौन सा तत्व नहीं बदला है।

एक ही रास्ता तय करने के लिए यह एक अवधि के आसपास "शीर्षक" इस तरह जोड़ने होगा:

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

तो यह

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/

करने के लिए अपने जावास्क्रिप्ट को बदलने