1
折りたたみ可能なdivタグで誰かが私を助けてくれることを願っています。HTMLページ内の折りたたみ可能なdivの位置合わせ
私がやりたいことは、複数の折りたたみ可能な2列のセクションでリストを作成することです。セクションはdivタグで設計され、リストに埋め込まれています。
これまでのところ私のコードはIEでは動作しますが、FirefoxやChromeでは動作しません。後者の2つでは、2列のサンプルを展開すると、リスト項目が右側に移動します。
以下のコードは問題を再現します。 MozillaまたはChromeで開き、最初のサンプル項目の[ ]をクリックすると、下のサンプルの箇条書き項目が右に移動します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="jquery-1.4.4.js"></script>
<style type="text/css">
div.sample {
position:relative;
left:0px;
}
div.item {
position:relative;
display:none;
width:600px;
left:10px;
text-align:justify;
}
div.ltcol{
float:left;
width:45%;
}
div.rtcol{
float:right;
width:45%;
}
</style>
</head>
<body>
<ul>
<li><div id="sample1" class="sample">Sample <a href="#" OnClick="showone('verbiage1');">[ ]</a>
<div id="verbiage1" class="item">
<div id="source" class="ltcol">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div id="target" class="rtcol">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div></div></li>
<li><div id="sample2" class="sample">Sample <a href="#" OnClick="showone('verbiage2');">[ ]</a>
<div id="verbiage2" class="item">
<div id="source" class="ltcol">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div id="target" class="rtcol">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div></div></li>
<script>
//Quick and dirty javascript to get it up and running.
alldivs=['verbiage1','verbiage2'];
function showone(name) {
divname="#".concat(name);
for (var i in alldivs){
if ("#".concat(alldivs[i])==divname){
$(("#".concat(alldivs[i]))).toggle(200);
}
else{
$(("#".concat(alldivs[i]))).hide(200);
}
}
return true;
};
</script>
</body>
</html>
助けていただければ幸いです。