切换脚本：从jQuery更改为"；普通javascript“；代码

我一直在为使用jQuery的网站使用切换脚本（单击某个链接时打开/关闭文本容器）。为了清理网站，我想完全摆脱jQuery，但在将现有jQuery代码转换为“普通javascript”时遇到了一些问题

以下是现行守则：

jQuery(function($){
$(document).ready(function(){
    $(".toggle_container").hide();
    $("h4.trigger").click(function(){
        $(this).toggleClass("active").next().slideToggle("normal");
        return false; //Prevent the browser jump to the link anchor
});
});
});

对应于此HTML源代码的：

<h4 class="trigger toggle-transparent "><a href="#">Click to show more</a></h3><div class="toggle_container ">
Hidden Text
</div>

隐藏文本

我尝试了以下代码，它没有给我一个错误，但在单击触发器时什么也不做：

var el = document.querySelectorAll('h4.trigger');
for(var i=0; i < el.length; i++){
    el[i].addEventListener('click', function () {
        this.classList.toggle("active").nextSibling.classList.toggle("toggle_container-active");
    }.bind(this));
}

var el=document.querySelectorAll（'h4.trigger'）；
对于（变量i=0；i

我对代码真正需要的唯一一件事是：单击类“trigger”应该将一些HTML类“active”切换到trigger元素和toggle_容器元素。剩下的我可以用CSS来改变

代码的难点在于它应该分别适用于一个页面上的多个切换区域（因此使用类，而不是id）

你知道我的代码哪里有问题，或者有什么（完全不同的）建议吗

我对javascript/jQuery的经验非常有限，对HTML/CSS更熟悉

谢谢，

---

Patrick

this.classList.toggle（“active”）不会再次返回元素，只是一个布尔值，用于通知操作是否成功。链接只在jQuery中发生，而不是在普通JavaScript中发生

this.classList.toggle("active").nextSibling.classList.toggle("toggle_container-active");

您应该使用类似以下内容，而不是上述内容：

this.classList.toggle("active");
this.nextSibling.classList.toggle("toggle_container-active");

---

在纯JS中不能像在jQuery中那样链接方法调用。您需要将

类列表分开。切换
callsAh，谢谢您的评论。不幸的是，它仍然不起作用，但现在给了我以下错误消息：“TypeError:this.classList未定义”。我还没有真正学会javascript，但我只是把在互联网上能找到的东西拼凑起来。你知道剩下的代码可能有什么问题吗？@Patrick如果你能用一个有用的东西创建一个新的代码，并告诉我你想要实现什么，我很乐意帮助你。谢谢你的提议。我用HTML、CSS和JS创建了一个JSBin（@Patrick It说，
jQuery没有定义
-我们需要包括jQuery。我已经做了。现在看看它：啊，对了。这是我第一次使用JSBin。现在它完全完成了它应该做的事情：单击触发器将打开隐藏的内容容器。再次单击触发器将关闭它。现在，在HT中不做任何更改ML和CSS我试图将jQuery代码更改为“just javascript”：不幸的是，这两行都以“this”开头。给我一条未定义的错误消息。你能看到问题的根源吗？正如我所说的：如果必要的话，代码的想法可以完全更改，只要它最终有效。