javascript - 如何使用 document.getElementByTagName 和目标特定的类名

Question

我这里有代码。

<div class="container">
<div class="accordionHeader">
<h1 onclick="test()"></h1>
</div>
<div class="accordionContent" style="display:none">
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
</div>
</div>

我想定位并显示/隐藏 class="accordionContent"。我试过使用 document.getElementByTagName 但我不知道如何定位 class="accordionContent"。我不允许使用 id。

希望你能帮助我。尝试搜索但没有运气。

Answer 1

你可以用 jquery 做这样的事情

$('.accordionContent').show(); //to show


$('.accordionContent').hide(); //to hide

甚至切换可以工作:)

$('.accordionContent').toggle(); //to hide and show 

$('.accordionContent').slideToggle(); //toggle with Animatation

$('.accordionContent').fadeIn(); //fadeIn with Animatation
$('.accordionContent').fadeOut(); //FadeOut with Animatation

选择任何一个，只要你觉得舒服:)

Answer 2

您可以使用getElementByClassName和隐藏/显示手风琴内容 div，如下所示：

document.getElementsByClassName('accordionContent')[0].style.display="show";  // to show

document.getElementsByClassName('accordionContent')[0].style.display="show";  // to hide