Hvordan Skjul objekter i Javascript
Inkludert en Javascript-kollaps alternativ i websiden kan du sette inn en kode i siden din som fører til innhold til å kollapse og så dukke opp igjen. Å ha en slik funksjon tilgjengelig på websiden kan være gunstig hvis du har bestemt innholdet du ønsker å fremheve, men har også noen sekundær, supplerende informasjon du vil inkludere. Du kan inkludere tilleggsinformasjon i en sammenleggbar del av siden.
Bruksanvisning
1 Logg inn på din webserver, og klikk for å åpne HTML-siden der du vil skape en sammenleggbar delen.
2 Klikk i "<head>" delen av siden.
3 Sett inn følgende Javascript kollaps kode:
<Script type = "text / javascript">
Var collapseDivs, collapseLinks;
funksjon createDocumentStructure (tagname) {
if (document.getElementsByTagName) {
var elements = document.getElementsByTagName(tagName);
collapseDivs = new Array (elements.length);
collapseLinks = new Array (elements.length);
for (var i = 0; i & lt; elements.length, jeg ++) {
Var element = elementer [i];
Var siblingContainer;
if (document.createElement &&
(SiblingContainer = document.createElement ( 'div')) &&
siblingContainer.style)
{
Var nextSibling = element.nextSibling;
element.parentNode.insertBefore (siblingContainer, nextSibling);
Var nextElement = elementer [i + 1];
while (nextSibling! = nextElement && nextSibling! = null) {
Var tomove = nextSibling;
nextSibling = nextSibling.nextSibling;
siblingContainer.appendChild (tomove);
}
siblingContainer.style.display = 'none';
collapseDivs [i] = siblingContainer;
createCollapseLink (element, siblingContainer, i);
}
else {
// Ingen dynamisk opprettelse av elementer mulige
komme tilbake;
}
}
createCollapseExpandAll (elementer [0]);
}
}
funksjon createCollapseLink (element, siblingContainer, indeks) {
Var span;
if (document.createElement && (span = document.createElement ( 'spenn'))) {
span.appendChild(document.createTextNode(String.fromCharCode(160)));
Var link = document.createElement ( 'a');
link.collapseDiv = siblingContainer;
link.href = '#';
link.appendChild (document.createTextNode ( 'utvide'));
link.onclick = collapseExpandLink;
collapseLinks [index] = link;
span.appendChild (link);
element.appendChild (spenn);
}
}
funksjon collapseExpandLink (evt) {
if (this.collapseDiv.style.display == '') {
this.parentNode.parentNode.nextSibling.style.display = 'none';
this.firstChild.nodeValue = 'utvide';
}
else {
this.parentNode.parentNode.nextSibling.style.display = '';
this.firstChild.nodeValue = 'sammenbrudd';
}
if (evt && evt.preventDefault) {
evt.preventDefault();
}
return false;
}
funksjon createCollapseExpandAll (firstElement) {
Var div;
if (document.createElement && (div = document.createElement ( 'div'))) {
var link = document.createElement('a');
link.href = '#';
link.appendChild (document.createTextNode ( 'vis alle'));
link.onclick = expandAll;
div.appendChild (link);
div.appendChild (document.createTextNode ( ''));
link = document.createElement ( 'a');
link.href = '#';
link.appendChild (document.createTextNode ( 'kollapser alt'));
link.onclick = collapseAll;
div.appendChild (link);
firstElement.parentNode.insertBefore (div, firstElement);
}
}
funksjon expandAll (evt) {
for (var i = 0; i <collapseDivs.length; i ++) {
collapseDivs[i].style.display = '';
collapseLinks [i] .firstChild.nodeValue = 'sammenbrudd';
}
if (evt && evt.preventDefault) {
evt.preventDefault();
}
return false;
}
funksjon collapseAll (evt) {
for (var i = 0; i <collapseDivs.length; i ++) {
collapseDivs[i].style.display = 'none';
collapseLinks [i] .firstChild.nodeValue = 'utvide';
}
if (evt && evt.preventDefault) {
evt.preventDefault();
}
return false;
}
</ Script>
<Script type = "text / javascript">
window.onload = function (evt) {
createDocumentStructure ( 'H1');
}
</ Script>
4 Sett inn følgende kode inne i "<body>" -delen av siden:
<Center> <h1> Sammenleggbar § Header </ h1> <p> Sammenleggbar informasjonen går her.
Erstatt "Sammenleggbar Seksjon Header" med overskriften i den delen du ønsker å kollapse. Erstatt "Sammenleggbar informasjonen går her" med den faktiske informasjonen du ønsker å kollapse.
5 Publiser siden.