Versteckte div mit übergeordneten onclick-Ereignis anzeigen und verbergen

Ich versuche, eine Liste von Newsletter-Thumbnails zu erstellen, die mit einem onclick -Ereignis des übergeordneten Headers angezeigt und ausgeblendet werden. Die Funktion wird ordnungsgemäß aufgerufen, um die Liste anzuzeigen, sie wird jedoch nicht bei einem zweiten Klick wieder ausgeblendet. Ich bin sicher, es ist etwas Einfaches, das ich vermisse, aber ich bin ratlos.Versteckte div mit übergeordneten onclick-Ereignis anzeigen und verbergen

function showBabList() { 
 
    if (document.getElementById('bablist').style.display = "none") { 
 
    document.getElementById('bablist').style.display = "block"; 
 
    } else { 
 
    document.getElementById('bablist').style.display = "none"; 
 
    } 
 
}

<h2 onclick="showBabList()">BITSandBYTES Newsletters</h2> 
 
<div id="bablist" style="display: none;"> 
 
    <ul> 
 
    <a href="newsletter/BITSandBYTES2017-07.pdf" target="bab"><img src="images/thumbs/BITSandBYTES2017-07_thumb.png" class="babthumb" height="100px" width="75px"></a> 
 
    <a href="newsletter/BITSandBYTES2017-08.pdf" target="bab"><img src="images/thumbs/BITSandBYTES2017-08_thumb.png" class="babthumb" height="100px" width="75px"></a> 
 
    </ul> 
 
</div>

Quelle

2017-09-13 RevFonzAyy

Ich glaube, Sie == statt = document.getElementById ('bablist') verwenden müssen. Style.display == "none" –

function showBabList() { 
 
    if (document.getElementById('bablist').style.display == "none") { 
 
    document.getElementById('bablist').style.display = "block"; 
 
    } else { 
 
    document.getElementById('bablist').style.display = "none"; 
 
    } 
 
}

<h2 onclick="showBabList()">BITSandBYTES Newsletters</h2> 
 
<div id="bablist" style="display: none;"> 
 
    <ul> 
 
    <a href="newsletter/BITSandBYTES2017-07.pdf" target="bab"><img src="images/thumbs/BITSandBYTES2017-07_thumb.png" class="babthumb" height="100px" width="75px"></a> 
 
    <a href="newsletter/BITSandBYTES2017-08.pdf" target="bab"><img src="images/thumbs/BITSandBYTES2017-08_thumb.png" class="babthumb" height="100px" width="75px"></a> 
 
    </ul> 
 
</div>

FALSCH
if (document.getElementById('bablist').style.display = "none")

CORRECT
if (document.getElementById('bablist').style.display == "none")

Quelle

2017-09-13 17:44:01 zynkn

von George, Sie richtig sind. Ich nahm an, dass die Anweisung nicht weiter aufgelöst werden musste, da die Funktion aufgerufen wurde. – RevFonzAyy

Versteckte div mit übergeordneten onclick-Ereignis anzeigen und verbergen

Antwort

Verwandte Themen