1
私はを使用して1つのdivにHTMLとしてロードするとJavaScriptアコーディオンプラグインが機能しない理由を理解していました。jqueryアコーディオン効果
アコーディオンは、連続して表示されない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を持つHTMLページにdiv要素にそのHTMLを読み込む
//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);
。しかし、正しく表示されていません。
コード全体を1つのhtmlファイルに書き込んで、ブラウザに直接ロードすると動作しますが、div関数 –