Question

我有一个脚本，可以在点击时扩展手风琴菜单。我使用getElementsByClassName

选择所需的菜单项

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");
   }
 }
};

不幸的是onclick不会触发，我不确定我做错了什么。我使用

测试了getElementsByClassName

acc[10].classList.toggle("active");
acc[10].nextElementSibling.classList.toggle("show");

这正常工作，因此getElementsByClassName正常工作我也尝试过使用document.querySelectorAll这也有用

我尝试使用它，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[10].classList.toggle("active");
 acc[10].nextElementSibling.classList.toggle("show");

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

   acc[i].onclick = function(){

更新

我的手风琴菜单位于Tab菜单中，该菜单有自己的JavaScript来更改标签：

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

我在Tab菜单外移动了手风琴菜单，并且onclick工作。如果我从选项卡菜单脚本中注释掉上面的代码，我的手风琴菜单会起作用，但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");
}

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

任何帮助都将不胜感激。

Answer 1

你应该对你的函数提供i的参考：

＆＃13;

window.onload = function() {
  var acc = document.getElementsByClassName("accordion_f");

  for (var i = 0; i < acc.length; i++) {
    acc[i].onclick = (function(index) {
      return function() {
        acc[index].classList.toggle("active");
        acc[index].nextElementSibling.classList.toggle("show");
      }
    })(i);
  };
};

＆＃13;

.accordion_f {
  display: block;
}

.panel {
  display: none;
}

.show {
  display: block !important;
}

＆＃13;

<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>
<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>
<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>

＆＃13;

Answer 2

  document.addEventListener("DOMContentLoaded", function(event) {
    
 var acc = document.getElementsByClassName("accordion_f");
 //  var acc = document.querySelectorAll(".accordion_f");
 var i; 


 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");
   }
 }
  });

<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>

Answer 3

问题是我的javascript嵌入另一个菜单，选项卡菜单中的javascript覆盖了我的手风琴菜单javascript。

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

uniform_random_probability_generator<double, std::knuth_b> urpg_kb;
double next_prob = urpg_kb();

onclick无法按预期工作

3 个答案: