我正在实现用于动态加载 div 的手风琴。问题是具有此脚本和 html 编码的脚本文件是异步加载的。
$("#leftNavBusinessCounts").append('<div class="SearchDetails"><strong> One-Stop Services </strong><br></br>View Centers by specific services.</div>');
$("#leftNavBusinessCounts").append('<div class="sliding-drawer one-stop-details"><h2>Business Services</h2><div>');
$(xml).find('FilterSection').eq(2).find("FilterItem").each(function() {
$("#leftNavBusinessCounts").append('<div>HI</div>');
});
$("#leftNavBusinessCounts").append('</div></div>');//this is closing even before the <div>HI</div> is loaded ,so its outside.
正如您在图像中看到的，这些值在手风琴之外，当我打开和关闭手风琴时它是空的。问题是：
萤火虫代码就像
所以我不确定 div 之前是如何关闭的。请查看我正在使用的 jquery 脚本和 css：
<style type="text/css">
.one-stop-details h2 {
display: block;
padding: 10px 0px 10px 30px;
background-image: url('/COSImages/expanding_section_background_closed.png');
background-position: right;
border: 2px solid #ededed;
-moz-border-radius: 8px;
border-radius: 8px;
cursor: pointer;
margin: 0px;
}
div.sliding-drawer {
margin: 10px 0px 10px 0px;
}
.sliding-drawer div {
display: none;
padding: 5px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.sliding-drawer h2').click(function () {
$(this).parent().children('.sliding-drawer div').slideToggle('slow');
if ($(this).css("background-image").indexOf('/COSImages/expanding_section_background_closed.png') == -1) {
$(this).css("background-image", "url('/COSImages/expanding_section_background_closed.png')");
}
else {
$(this).css("background-image", "url('/COSImages/expanding_section_background_open.png')");
}
});
});
</script>
我错过了什么重要的东西吗？谢谢。