我想将动态内容添加到 JQuery Accordion 容器中。我的代码几乎可以工作，但是有一个问题。
我不知道如何让第一个容器识别新图像。它就像容器中没有任何东西一样。我怀疑这与使用 Javascript 加载图像有关，但我不是专家！我的猜测是出了点问题。所有按钮仍然起作用，手风琴在所有其他区域都可以正常工作。我尝试设置不同的参数，例如 autoheight、clearStyle 等。对我来说没有任何效果。以下是修剪过的商品：
HTML
.........
<section id="rightMenu">
<div id="addHolder">
<h3 class="topHeader"><a href="#">Quick Pick</a></h3>
<ul id="quickPick"></ul>
<h3><a href="#">Notes</a></h3>
<div>
<p>
......
</p>
</div>
<h3><a href="#">Quiz</a></h3>
<div>
<p>
.....
</p>
</div>
<h3><a href="#">Image Options</a></h3>
<div></div>
.........
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/modUI.js"></script>
<script src="js/imageProvider.js"></script>
<script>
window.onload = imageProvider.initLinks;
$(document).ready(modUI.modAccord);
</script>
JS-modUI.js
var modUI = {
init: function(){
},
modAccord: function(){
$( "#addHolder" ).accordion({
autoHeight: true,
navigation: true,
clearStyle: true
});
}
};
JS - imageProvider.js
var imageProvider = {
thisPic:0,
initLinks:function () {
imageProvider.imageList(14, 2);
document.getElementById("nextPic").onclick = imageProvider.processNext;
document.getElementById("prevPic").onclick = imageProvider.processPrev;
},
....
multiDimensionArray:function (rows, columns) {
var myArray = new Array(rows);
for (var i = 0; i < rows; i++) {
myArray[i] = new Array(columns);
for (var j = 0; j < columns; j++) {
myArray[i][j] = "";
}
}
return (myArray);
},
.....
imageList:function (qty, data) {
var imageData = imageProvider.multiDimensionArray(qty, data);
var filePath = './images/mods/angiograph/head/';
var imgPrefix = 'Ag';
var imageType = '.jpg';
for (var i = 0; i < qty; i++) {
imageData[i][1] = filePath + imgPrefix + (i + 1) + imageType;
}
for (var j = 0; j<imageData.length; j++){
$("<li>", { html:'<img src="' + imageData[j][1] + '" width="75" height="75"/>'}).appendTo("#quickPick");
}
}
};
CSS
#mainSection #rightMenu {
position: absolute;
width: 15%;
height: 90%;
left:65%;
top: 5%;
background-color: #d3cbbd;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, .75);
-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, .75);
box-shadow: 0px 0px 15px rgba(0, 0, 0, .75);
}
#mainSection #imageHolder img{
position: absolute;
width: 63%;
height: 70%;
left: 15%;
top: 15%;
}
#mainSection #rightMenu #addHolder{
position: absolute;
width: 100%;
height: 100%;
left:0;
top: 0;
}
#mainSection #rightMenu #addHolder h3.topHeader {
position: relative;
top: -1px;
-webkit-border-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#mainSection #rightMenu #addHolder p{
font-size: 1.1em;
font-family: verdana, sans-serif;
}
#mainSection #rightMenu #addHolder #quickPick{
position: absolute;
list-style: none;
top: 6em;
left: .1em;
height: 30%;
}
#mainSection #rightMenu #addHolder li{
display: inline;
float: left;
margin-left: .2em;
}
.ui-accordion { width: 100%; }
.ui-accordion .ui-accordion-header {
cursor: pointer;
position: relative;
margin-top: 1px;
background-color: #456f74;
}
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active {
border-bottom: 0 !important;
background-color: #eb5937;
}
.ui-accordion .ui-accordion-header a {
display: block;
font-family: verdana, sans-serif;
font-size: 1em;
padding: .65em .65em .65em 1em;
text-decoration: none;
color: #f5f5f5;
}
.ui-accordion-icons .ui-accordion-header a {
padding-left: .5em;
}
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content {
padding: 1em 1em;
border-top: 0;
margin-top: -25px;
position: relative;
top: 0;
overflow: auto;
display: inline-block;
}