2

デフォルトで4番目の列が非表示になっている4列と10行のテーブルがあります。1行目に画像の表示/非表示ボタンがあります。

必要なのは、画像の表示/非表示ボタンをクリックしたときです。

  1. 左から右にスライドするように表示される 4 番目の列
  2. 閉じるボタンが表示されるモーダル オーバーレイ div (ライトボックス、シャドウ ボックスなど)
  3. モーダル ウィンドウを閉じてから、画像の表示/非表示ボタンをもう一度クリックすると、4 番目の列が左にスライドします。

私が書いたコードは私のために働いていますが、3列目から右に向かってスライドインせず、もう一度クリックするとスライドバックしません。また、表示/非表示ボタンをクリックしても、モーダル オーバーレイが機能しません。修正するには、これに関するヘルプが必要です。

これは私のコードです:

.subtn{
display:inline-block;
background:url("images/next_right.png") right 0px no-repeat;
width:16px;
height:16px;
}
.subtn.expanded{
background:url("images/previous_left.png") right 0px no-repeat;
width:16px;
height:16px;
}




$(document).ready(function(){
  var $content = $("td:nth-child(4)").hide();
  $(".subtn").on("click", function(e){
    $(this).toggleClass("expanded");
    $content.slideToggle();
  });
});



<table>
<tr>
        <td colspan="4" align="right"><a href="#" rel="lightbox" class="subtn"></a></td>
    </tr>
    <tr>
        <td>1</td>
        <td>sam</td>
        <td>europe</td>
        <td style="display:none;">new</td>
    </tr>
    <tr>
        <td>7</td>
        <td>john</td>
        <td>europe</td>
        <td style="display:none;">new</td>
    </tr>
    <tr>
        <td>4</td>
        <td>bob</td>
        <td>africa</td>
        <td style="display:none;">new</td>
    </tr>

</table>

JSフィドルリンク

4

1 に答える 1

1

あなたが提供したコードには、あなたのモーダルについて何もありません。なので、この部分は飛ばします。4列目のトグルの時点で、問題は2つの点にあります:

  1. アニメーションはブロック要素でうまく機能します。TDデフォルトではブロックされません。だから私はあなたのCSSルールでそれを変更しましたdisplay: block;
  2. slideToggleスライドダウンのみです。左から右へ、また後ろへスライドするにはtoggle、適切なオプションを使用する必要があります。

あなたが提供したjsFiddleには、トグルプロセスを実行するボタンがありませんでした。追加しました。Anthing はここで動作します: http://jsfiddle.net/pEKvq/7/

于 2013-04-30T16:04:59.887 に答える