Javascript onclick未按预期工作

我有一个脚本，当点击时会展开一个手风琴菜单。 我使用GetElementsByCassName选择所需的菜单项

window.onload = function() {
 var acc = document.getElementsByClassName("accordion_f");
 //  var acc = document.querySelectorAll(".accordion_f");
 var i; 

// test code start
 acc[10].classList.toggle("active");
 acc[10].nextElementSibling.classList.toggle("show");
// test code end

 for (i = 0; i < acc.length; i++) {
   acc[i].onclick = function(){
//        acc[i].classList.toggle("active");
   this.classList.toggle("active");
//        acc[i].nextElementSibling.classList.toggle("show");
   this.nextElementSibling.classList.toggle("show");
   }
 }
};  

这可以正常工作，因此getElementsByClassName可以正常工作 我还尝试过使用document.queryselector，所有这些都有效

我试着用这个，acc[I]似乎都不起作用。但我感觉这不是问题所在，因为当我检查html元素和检查事件时，我没有看到在当前元素上注册的事件处理程序

我的html如下所示：

<button class="accordion_f">24/7 Activity Tracking</button>
<div class="panel">
      <p>Tracks your daily activity at five intensity levels for 24 hours a day, seven days a week, and provides a complete picture of all of your activity. It counts your active time, daily burnt calories, steps, distance from steps and sleep.</p>
</div>

但这不起作用，甚至无法在元素上注册

   acc[i].onclick = function(){

更新

我的手风琴菜单位于一个选项卡菜单内，该菜单有自己的JavaScript来更改选项卡：

var newHTML = document.getElementById(newTab).innerHTML;
document.getElementById('first_View').innerHTML = newHTML;

我将手风琴菜单移到选项卡菜单外，然后单击“工作”。 如果我从tab菜单脚本中注释掉上面的代码，我的手风琴菜单会工作，但是tab菜单不会改变

使用addEventListener而不是onclick进行进一步测试：

window.onload = function() {
  var acc = document.getElementsByClassName("accordion_f");
  var i; 

// test code start
  acc[10].classList.toggle("active");
  acc[10].nextElementSibling.classList.toggle("show");
// test code end

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener('click', expand_m, false); 
  } 
};  

function expand_m(){      
   this.classList.toggle("active");
   this.nextElementSibling.classList.toggle("show");
}

window.onload=function（）{
var acc=document.getElementsByClassName（“accordion_f”）；
var i；
//测试代码启动
acc[10].classList.toggle（“活动”）；
acc[10].nextElementSibling.classList.toggle（“显示”）；
//测试代码结束
对于（i=0；i

这与上面的原始onclick代码完全相同，当我检查html元素和检查事件时，我没有看到在当前元素上注册的事件处理程序，因此单击对我不起作用，除非我停止innerHTML更改

---

如有任何帮助，我们将不胜感激。

您应在单击以下项时引用您的函数

i

：

window.onload=function（）{
var acc=document.getElementsByClassName（“accordion_f”）；
对于（变量i=0；i
.accordion\u f{
显示：块；
}
.小组{
显示：无；
}
.表演{
显示：块！重要；
}
24/7活动跟踪
每周7天，每天24小时，以五种强度级别跟踪您的日常活动，并提供您所有活动的完整图片。它计算你的活动时间、每天消耗的卡路里、步数、步距和睡眠

24/7活动跟踪
每周7天，每天24小时，以五种强度级别跟踪您的日常活动，并提供您所有活动的完整图片。它计算你的活动时间、每天消耗的卡路里、步数、步距和睡眠

24/7活动跟踪
每周7天，每天24小时，以五种强度级别跟踪您的日常活动，并提供您所有活动的完整图片。它计算你的活动时间、每天消耗的卡路里、步数、步距和睡眠


document.addEventListener（“DOMContentLoaded”），函数（事件）{
var acc=document.getElementsByClassName（“accordion_f”）；
//var acc=文件查询选择器所有（“.accordion_f”）；
var i；
对于（i=0；i
24/7活动跟踪
每周7天，每天24小时，以五种强度级别跟踪您的日常活动，并提供您所有活动的完整图片。它计算你的活动时间、每天消耗的卡路里、步数、步距和睡眠

问题在于将我的javascript嵌入到另一个菜单中，选项卡菜单中的javascript覆盖了我的手风琴菜单javascript

所以我只是在Tab菜单的末尾调用了accordion函数，onclick开始工作

function changeTab(tab){        
var newTab = "view"+tab;
var element_id = "t";
var newHTML = document.getElementById(newTab).innerHTML;  
document.getElementById('first_View').innerHTML = newHTML; 

accord_menu();         
}

function accord_menu() {
  var acc = document.getElementsByClassName("accordion_f");
  var i; 

  for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
      this.classList.toggle("active");
      this.nextElementSibling.classList.toggle("show");
    } 
  } 
}

函数更改选项卡（选项卡）{
var newTab=“视图”+选项卡；
var元素_id=“t”；
var newHTML=document.getElementById（newTab.innerHTML）；
document.getElementById（'first_View'）。innerHTML=newHTML；
雅阁菜单（）；
}
功能符合菜单（）{
var acc=document.getElementsByClassName（“accordion_f”）；
var i；
对于（i=0；i
vanilla JS中是否有
elem.toggle（）
方法？要么我无知，要么它真的不存在。你检查过你的控制台有没有错误吗？@DanielCheung事实上，除了它是元素类列表的一个方法，而不是元素本身。@xorspark嘿，谢谢！我的谷歌搜索充斥着jQuery结果。：）您还需要返回一个函数，否则只会执行每次迭代的代码。@xorspark，Tanx，Edited；）这仍然不起作用，当我检查html元素和检查事件时，我没有看到在当前元素上注册的事件处理程序。我的手风琴菜单在一个选项卡菜单中，它有自己的css类，所以我将手风琴菜单移到选项卡菜单之外，onclick可以工作。那么css可以防止onclick在特定类上工作吗？我没有使用任何id，我的类名是唯一的。运行上面的代码段，您可以看到它工作正常。请使用相关的html、css和js更新您的问题，如果没有它们，我们将无法帮助您。感谢您的输入，但我不理解对函数（index）和返回函数（）的需要。没有它，我的代码运行良好！
window.onload = function() {
  var acc = document.getElementsByClassName("accordion_f");
  var i; 

// test code start
  acc[10].classList.toggle("active");
  acc[10].nextElementSibling.classList.toggle("show");
// test code end

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener('click', expand_m, false); 
  } 
};  

function expand_m(){      
   this.classList.toggle("active");
   this.nextElementSibling.classList.toggle("show");
}

function changeTab(tab){        
var newTab = "view"+tab;
var element_id = "t";
var newHTML = document.getElementById(newTab).innerHTML;  
document.getElementById('first_View').innerHTML = newHTML; 

accord_menu();         
}

function accord_menu() {
  var acc = document.getElementsByClassName("accordion_f");
  var i; 

  for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
      this.classList.toggle("active");
      this.nextElementSibling.classList.toggle("show");
    } 
  } 
}