我对 JS 相当陌生,我以为我理解页面组件的加载顺序,但这让我困惑。
我正在与 Foundation 5 合作,并且正在使用 Accordion 组件。在我的 js 脚本中,我加载数据并将其放入 Accordion 中,然后该 Accordion 成为 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 都被替换,但如果我删除 <dl class="accordion" data-accordion > </dl>
从我的html中,然后当JS加载时,页面没有正确显示 Accordion ,点击时它不会展开。
最佳答案
您需要重排
您的基础插件,因为数据稍后会通过 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>
关于javascript - 如果未在 HTML 中声明,Foundation Accordion 不会加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28219256/