3

折り畳み式のパネルを作ろうとしています。以下のコードは、テーブルで得た最も近いものですが、もう一度折りたたむと、<td>の表示が積み上げられ (Firefox でのみ発生)、Chrome では、<td>折りたたまれた後に data が適切な幅ではありません。

また、画像を繰り返し切り替えることはできますか？折りたたむと名前テーブルに緑の点が表示され、閉じると赤の点が表示されますか?

コードは次のとおりです。

<?php
include "config/tabelwidth.php";
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>


<script type="text/javascript">                                         
$(document).ready(function() {

   $("tr.header").click(function () { 
      $("tr.child", $(this).parent()).slideToggle("fast");
      $("td.subs", $(this).parent()).slideToggle("fast");
   });
});

</script>                                                               


<table border="1px" width="<?php echo $width."px"?>">
    <tr class="header">
        <td width="<?php echo $width1."px"?>">naam</td>
        <td width="<?php echo $width2."px"?>" class="subs">subs</td>
        <td width="<?php echo $width3."px"?>" class="subs">subs</td>
        <td width="<?php echo $width4."px"?>" class="subs">subs</td>
    </tr>
    <tr class="child">
        <td width="<?php echo $width1."px"?>">data1</td>
        <td width="<?php echo $width2."px"?>">data2</td>
        <td width="<?php echo $width3."px"?>">data3</td>
        <td width="<?php echo $width4."px"?>">data4</td>
    </tr>
</table>

編集：

わかりましたので、jQueryの更新が機能しました!:)

ここで親切な人たちに会うのが大好きです.jQueryは学ぶのに本当に良いことだと思います^^

どこでjQueryを学んだのですか？

最後に私の質問の最後の部分..

折りたたまれたときに下向きの矢印 (名前: arrowdown) の画像が必要だとしましょう。非表示の場合、矢印は右向き (名前: arrowright) です。どのように修正しましたか? ;o:)

4

2 に答える 2

2

あなたが求めていることのほとんどすべては、いくつかの CSS ルールと非常に単純な jQuery トグルで実行できます。ここに例を投稿しました：http://jsfiddle.net/2BbUw/

本質的な要点は、モードのときに最初の行の最初の子のみを強制的に表示する CSS ルールを作成し、 jQuery を使用してテーブル自体のタグ.collapsedを切り替えることです。.collapsed

jQuery は非常に単純になります。

$(document).ready(function () {
    $('table.collapsible tr:first-child').on('click', function(ev) {
        $(ev.target).closest('table.collapsible').toggleClass('collapsed');
    });​
});

// note that the above only works in later versions of jQuery, due to .on()
// If you are using an earlier version of jQuery, replace .on() with .bind()

ハンドラーはtr:first-child(テーブルの最初の行) のみを指します。これはすべて CSS セレクター ベースであるため、ページ内のすべてのテーブルにも自動的に適用さ.collapsibleれます。

CSS は、一連の疑似セレクターを使用するため、もう少し複雑です。

table.collapsible {
    width: 400px;
    border: 1px solid #666;
    margin: 5px;
    position: relative;
}

table.collapsible td {
    padding: 5px;
}
table.collapsible tr:first-child td:first-child {
    text-indent: 15px;
}

table.collapsible.collapsed tr:not(:first-child),
table.collapsible.collapsed tr:first-child td:not(:first-child) {
    display: none;
}

あなたが要求した指標については、次のようなものを提案します。これは少し大雑把ですが、純粋な CSS ソリューション (ブラウザーで非常に高速であることを意味します) であることに注意してください。

table.collapsible::before {
    content: '';
    border: none;
    position: absolute;
    left: 5px; top: 12px;
    height: 10px; width: 10px;
    border-radius: 5px;
    background-color: green;
}
table.collapsible.collapsed::before {
    background-color: red;
}

これはすべてのブラウザーで動作することがわかると思います。すべて CSS トグルであるため非常に高速であり、要求されたさまざまなことを非常に単純な jQuery で処理します。

于 2012-11-18T20:48:45.183 に答える
0

Firefox 16 および Google Chrome 22 でテスト済み 正常に動作します (違いがある場合は px を削除しました) - Fiddle違い があるpx場合は削除しました。

<table border="1px" width="400px">
    <tr class="header">
        <td width="100">naam</td>
        <td width="100" class="subs">subs</td>
        <td width="100" class="subs">subs</td>
        <td width="100" class="subs">subs</td>
    </tr>
    <tr class="child">
        <td width="100">data1</td>
        <td width="100">data2</td>
        <td width="100">data3</td>
        <td width="100">data4</td>    
    </tr>
</table>​

理想的な解決策は、CSS スプライトを作成し、その背景位置を切り替えることです

編集

jQuery をアップグレードしてください。jQuery 1.3.2 を使用しているようですが、<tr>display プロパティをに設定するバグがあるようblockです。table-row

デバッグ

于 2012-11-18T20:09:36.793 に答える