基金会手风琴如果未在 HTML 中声明，则不加载

Foundation Accordion not loading if not declared in HTML

本文关键字：声明 加载 HTML 手风琴 如果 基金会      更新时间：2023-09-26

我对JS相当陌生，我以为我理解页面组件的加载顺序，但这让我感到困惑。

我

正在使用基础 5，我正在使用手风琴组件.在我的js脚本中，我加载数据并将其放入手风琴中，然后成为mainContainerdiv的内部html。

<link rel="stylesheet" href="css/foundation.complete.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/myCss.css" />
<script src="js/vendor/modernizr.js"></script>
<script src="js/app.js"></script>
<script src="js/vendor/jquery.js"></script>
<body onload="iniciarPg()">
<div id="principal" class="mainContainer">
      <dl class="accordion" data-accordion  > </dl>
</div>
 function iniciarPg()
{
$(document).foundation({
      accordion: { toggleable: true  }
                      });
    loadData();
}
</script>
<!--SCRIPTS        -->
<script src="js/classie.js"></script>
<script src="js/foundation.min.js"/>
<script src="js/foundation/foundation.accordion.js"/>
</body>

我无法理解的部分是，尽管 mainContainer 的所有内部 HTML 都被替换了，但如果我从我的 html 中删除<dl class="accordion" data-accordion > </dl>，那么当 JS 加载时，页面不会正确显示手风琴，单击时它不会展开。

你需要

reflow你的基础插件，因为数据稍后通过ajax。

 function iniciarPg()
{
$(document).foundation({
      accordion: { toggleable: true  }
                      });
    loadData();
    //make sure the ajax has been finished and the HTML is properly set, otherwise move following line to you ajax success handler end.
    $(document).foundation('reflow');
}
</script>
相关文章：