Jquery Accordion未重新确定内容

Jquery Accordion未重新确定内容,jquery,accordion,dynamic-data,thumbnails,Jquery,Accordion,Dynamic Data,Thumbnails,我想向JQuery Accordion容器添加动态内容。我的代码几乎可以工作,但有一个问题 我不知道如何让第一个容器识别新图像。它的行为就像容器中没有任何东西一样。我怀疑这与用Javascript加载图像有关,但我不是专家!我猜是出了点问题。所有的按钮仍在工作,手风琴在所有其他区域都发挥着应有的作用。我尝试过设置不同的参数,如autoheight、clearStyle等。。对我来说什么都不管用。这是修整过的货物: HTML ......... <section id="rightMen

我想向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-imageProvider.JS

var modUI = {
init: function(){
},
modAccord: function(){
    $( "#addHolder" ).accordion({
        autoHeight: true,
        navigation: true,
        clearStyle: true
    });
}
};
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");
    }

}
 };
    真的不应该是

      真的不应该是

        #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;
        
        }