1

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');">[&nbsp;]</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');">[&nbsp;]</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>

どんな助けでも大歓迎です。

4

1 に答える 1

1

私があなたの問題を正しく理解しているなら、あなたはあなたの冗長なdivをクリアする必要があります。参考のためにこのフィドルを参照してください：http：//jsfiddle.net/Ujw5b/

.clearfix:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
}

.clearfix {
   display: inline-block;
}

html[xmlns] .clearfix {
   display: block;
}

* html .clearfix {
   height: 1%;
   overflow: visible;
}
于 2011-07-25T14:49:21.090 に答える