jquery accordion effect

问题

I've been working for some time to understand why a JavaScript horizontal accordion plugin doesnt work when I load it as html into one div using .load().

The accordion extends out beyond the div not showing in a row.

I am using jQuery 1.7.1; this plugin was created for 1.3.2, but I don't know if that is causing the problem.

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:

<script type="text/javascript">
$(document).ready( function() {
  $('#content_ac').load("prod_ind_present.html");
});
<script>

prod_ind_present.html:

    <style type="text/css">
    .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;}
    </style>
    <div class="set set1">
        <div class="title"><img src="images/menu1-h.jpg" width="30" height="198" /></div>
        <div class="contentt"><img src="images/menu-img-1.jpg" width="486" height="198" /></div>
    </div>
    ...
    <div class="set set7">
        <div class="title"><img src="images/menu7-h.jpg" width="30" height="198" /></div>
        <div class="contentt"><img src="images/menu-img-7.jpg" width="486" height="198" /></div>
    </div>
    </div>
    <script language="javascript" type="text/javascript">
    $(document).ready(function() {
      $("#accordion1").msAccordion({defaultid:3, autodelay:4});
    });
    </script>

The result is that in #content_ac, which has a auto width property, the sets of accordion divs extends out of bounds of the divs, pushing other content down.

The plugin:

//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);

I load that html into div in an html page, which has several other divs too. But it's not showing correctly.

Here is a screen capture showing the problem.

回答1:

I have been looking in your test web in dielecsur.com and I think that the problem is about de class 'content' in the div that has the image. This class has asigned a size by css that makes it to work that way.

来源：https://stackoverflow.com/questions/9014156/jquery-accordion-effect