我已经工作了一段时间,以便了解为什么JavaScript水平手风琴插件在使用.load()
将其作为html加载到一个div中时无效。
手风琴延伸到不连续显示的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加载到html页面中的div中,其中还有几个其他div。但它没有正确显示。
答案 0 :(得分:1)
我一直在dielecsur.com上查看你的测试网,我认为问题是关于具有图像的div中的de class'content'。这个类通过css赋予了一个大小,使它能够以这种方式工作。