用于多用途淡入淡出文本的Javascript不起作用

我正在处理一些简单的“阅读更多”淡入淡出文本元素，但在让脚本正常工作时遇到了一些麻烦

var box = document.querySelector('.readmorebox');
var listItems = document.querySelectorAll('.arrow');

for(var i = 0; i < listItems.length; i++){

    listItems[i].addEventListener('click', function(event) {

        box.classList.toggle('open');

    });
}

var-box=document.querySelector（'.readmorebox'）；
var listItems=document.querySelectorAll（'.arrow'）；
对于（变量i=0；i

第一个淡入淡出文本元素可以工作，但下列元素都不能工作

这是我使用的html代码：

    <div class="readmorebox">
        <p class="readmoretext">Lorem ipsum</p>
        <button class="arrow"><i class="fa fa-chevron-down" style="color:#3e4044"></i></button>
        <div class="readmoreboxshadow"></div>
    </div>

Lorem ipsum

---

使用ID应该是最后一个选择。外面有人能帮我吗。

什么是“第一个淡入淡出的文本元素”？下面是什么？“

box

始终是同一个元素。您希望它会发生什么？您的代码远未完成。它根本无法重现您所说的内容。