jquery手风琴效果

我已经工作了一段时间来理解为什么当我使用.load()它作为html加载到一个div中时，JavaScript水平手风琴插件.load() 。

手风琴延伸到不连续显示的div之外。

我正在使用jQuery 1.7.1; 这个插件是为1.3.2创建的，但我不知道是否会导致问题。

CSS

 #content_ac { position:absolute; left:0px; top:300px; width:auto; height:auto; border: 1px solid #99cc33; padding-top:10px; padding-right:10px; padding-bottom:10px; padding-left:10px; }

index.html的：

  $(document).ready( function() { $('#content_ac').load("prod_ind_present.html"); });

prod_ind_present.html：

   .accordionWrapper{display:inline-block; background-color:#fff; overflow:hidden;} .accordionWrapper img{vertical-align:top; border:0; margin:0; padding:0} .accordionWrapper div{display:inline; float:left; margin:auto;} .accordionWrapper div.title{cursor:pointer;} .accordionWrapper div.contentt{display:none;} .set{border-bottom:1px solid #000} .set1{background-color:#C77B3F;} .set2{background-color:#FFC732;} .set3{background-color:#007C90;} .set4{background-color:#AD6F08;} .set5{background-color:#387855;} .set6{background-color:#8C4B2D;} .set7{background-color:#82A668;}   
 
 
 ...

结果是，在#content_ac ，它具有自动宽度属性，手风琴div的集合延伸到div的边界之外，推动其他内容。

//menu Accordion //author: Marghoob Suleman //Date: 05th Aug, 2009 //Version: 1.0 //web: www.giftlelo.com | www.marghoobsuleman.com ;(function($){ $.fn.msAccordion = function(options) { options = $.extend({ currentDiv:'1', previousDiv:'', vertical: false, defaultid:0, currentcounter:0, intervalid:0, autodelay:0, event:"click", alldivs_array:new Array() }, options); $(this).addClass("accordionWrapper"); $(this).css({overflow:"hidden"}); //alert(this); var elementid = $(this).attr("id"); var allDivs = this.children(); if(options.autodelay>0) { $("#"+ elementid +" > div").live("mouseenter", function(){ pause(); }); $("#"+ elementid +" > div").live("mouseleave", function(){ startPlay(); }); } //set ids allDivs.each(function(current) { var iCurrent = current; var sTitleID = elementid+"_msTitle_"+(iCurrent); var sContentID = sTitleID+"_msContent_"+(iCurrent); var currentDiv = allDivs[iCurrent]; var totalChild = currentDiv.childNodes.length; var titleDiv = $(currentDiv).find("div.title"); titleDiv.attr("id", sTitleID); var contentDiv = $(currentDiv).find("div.content"); contentDiv.attr("id", sContentID); options.alldivs_array.push(sTitleID); //$("#"+sTitleID).click(function(){openMe(sTitleID);}); $("#"+sTitleID).bind(options.event, function(){pause();openMe(sTitleID);}); }); //make vertical if(options.vertical) {makeVertical();}; //open default openMe(elementid+"_msTitle_"+options.defaultid); if(options.autodelay>0) {startPlay();}; //alert(allDivs.length); function openMe(id) { var sTitleID = id; var iCurrent = sTitleID.split("_")[sTitleID.split("_").length-1]; options.currentcounter = iCurrent; var sContentID = id+"_msContent_"+iCurrent; if($("#"+sContentID).css("display")=="none") { if(options.previousDiv!="") { closeMe(options.previousDiv); }; if(options.vertical) { $("#"+sContentID).slideDown("slow"); } else { $("#"+sContentID).show("slow"); } options.currentDiv = sContentID; options.previousDiv = options.currentDiv; }; }; function closeMe(div) { if(options.vertical) { $("#"+div).slideUp("slow"); } else { $("#"+div).hide("slow"); }; }; function makeVertical() { $("#"+elementid +" > div").css({display:"block", float:"none", clear:"both"}); $("#"+elementid +" > div > div.title").css({display:"block", float:"none", clear:"both"}); $("#"+elementid +" > div > div.content").css({clear:"both"}); }; function startPlay() { options.intervalid = window.setInterval(play, options.autodelay*1000); }; function play() { var sTitleId = options.alldivs_array[options.currentcounter]; openMe(sTitleId); options.currentcounter++; if(options.currentcounter==options.alldivs_array.length) options.currentcounter = 0; }; function pause() { window.clearInterval(options.intervalid); }; } })(jQuery);

我在html页面中将html加载到div中，其中还有其他几个div。但它没有正确显示。