JQuery эффект аккордеона

Question

Я некоторое время работал над тем, чтобы понять, почему плагин с горизонтальным аккордеоном JavaScript не работает, когда я загружаю его в виде HTML в один div, используя .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:

<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>

Результатом является то, что в #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 в div на html-странице, которая также имеет несколько других div-ов.Но он не отображается правильно.

Вот снимок экрана , показывающий проблему.

Answer 1

Я просматривал ваш тестовый веб-сайт на dielecsur.com и думаю, что проблема в том, что касается класса 'content' в div с изображением.Этот класс присваивает размер css, что позволяет ему работать таким образом.