如果未在 HTML 中声明,则 Foundation Accordion 不会加载

Foundation Accordion not loading if not declared in HTML

我对 JS 还很陌生,我以为我理解页面组件的加载顺序,但这让我很困惑。

我正在使用 foundation 5,我正在使用 accordion 组件。在我的 js 脚本中,我加载数据并将其放入手风琴中,然后手风琴成为 mainContainer div.

的内部 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>