javascript - Accordion 无法正常工作

标签 javascript accordion

我正在用 javascript 使用 Accordion 菜单,这是代码

    <body> 
<script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>
<div style="width:50%;float: left;height:50%;" id="accordion"></div>

<script>

var html = '';
var text = 'Lorem ipsum dolor sit amet ..';
// first we generating our html in the loop
for(var i=0 ; i<6 ; i++) {
  html += '<h3>Section ' + i + '</h3>' + '<div><p>' + text + '</p></div>';
}
document.getElementById("accordion").innerHTML = html;

// next we're inserting html into block with ID accordion

</script>

它工作正常,但是当我把它放在一个函数中时,它不起作用 此代码不起作用

    <body onload="test()"> 
<script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>
<div style="width:50%;float: left;height:50%;" id="accordion"></div>

<script>
function test(){
var html = '';
var text = 'Lorem ipsum dolor sit amet ..';
// first we generating our html in the loop
for(var i=0 ; i<6 ; i++) {
  html += '<h3>Section ' + i + '</h3>' + '<div><p>' + text + '</p></div>';
}
document.getElementById("accordion").innerHTML = html;
}
</script> 

我怎样才能使 Accordion 菜单在函数中工作?

最佳答案

它在函数内部时不起作用的原因是因为您没有显式调用该函数。 在方便的地方定义该函数,然后从 documentOnLoad 函数中调用它,以便脚本在执行时获取所有引用的元素。

编辑:不敢相信我错过了 onload="test()" 行。 这让我觉得原因可能是执行顺序。您在定义它之前调用测试,这可能是一个原因。在顶部某处(onload=test() 之前)定义测试函数,这可能会起到作用。 同样从 $(function()...) 调用测试可能是个好主意,因为它肯定会在 documentReady 之后和调用 .accordion() 函数之前执行 附言将此视为建议而不是具体答案,因为我无法自己测试我的答案,因为我在工作场所。

关于javascript - Accordion 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30128602/

相关文章:

javascript - 如何使用 JavaScript 将 XML 发布到 iframe

javascript - 如何单击输入字段内的字形图标

javascript - 无法通过angularjs在phonegap中显示联系人照片

angularjs - 为什么这个 UI-Bootstrap Accordion 不起作用?

JQuery Accordion 如何使用脚本打开特定 header

html - 如何在图像上创建颜色叠加层?

css - Material-UI:仅通过单击图标来展开 Accordion

php - 在javascript函数中增加php变量

javascript - 尝试让网站添加值

javascript - 如何使用 Adi Palaz 的嵌套 Accordion 展开全部/折叠全部