1

jQueryを使用してTDタグのクリックイベントに基づいてDIVをトグル(高さの増減)しようとしています。私はjQueryが初めてであることに注意してください。

<td id="ProductionTargetDEtd" class="collapsibleTdRelease" width="100%" onclick="javascript:toggleHeader();">
<table width="100%">
    // Some Html code here
</table>
</td></tr>
<tr><td>
<div id="ProductionTargetDEDiv" class="slidingDiv" style="">
  // Some Html code here
</div>
</td>

JSP スクリプト タグで、以下のように高さ = 0 を指定して DIV を非表示にしています。

<script>
$(document).ready(function(){
    $(this).find("div#ProductionTargetDEDiv").each(function() {$(this).css({  overflow: "hidden", height: "0px" })});
</script>
});

最後に、TD id="ProductionTargetDEtd" のクリック イベントで、javascript メソッドの toggleHeader() の下で呼び出しています。

function toggleHeader(){
    $("td#ProductionTargetDEtd").removeAttr("onclick");

    $("td#ProductionTargetDEtd").toggle(function(){
            $("div#ProductionTargetDEDiv").animate({ height: 135}, 400);
        },function(){
            $("div#ProductionTargetDEDiv").animate({ height: 0 }, 400);
    });
}

TD タグをクリックすると、DIV が下にスライドし、次にクリックすると上にスライドします。上記の方法は、1つの異常を除いて正常に機能しています:

1) 1 回目のクリックでは何も起こらず、2 回目のクリック以降は DIV がスムーズに上下にスライドします。

驚いたことに、インライン javascript 呼び出しを使用して Javascript メソッド toggleHeader() を呼び出さない場合

onclick="javascript:toggleHeader()"

代わりに、すべての jQuery コードを JSP のタグに配置すると、この最初のクリックの問題が解決されます。

4

1 に答える 1

0

why do u need trigger for ProductionTargetDEDiv click...remove that..

you are calling td#ProductionTargetDEtd click event twice.. one in your html

here

<td id="ProductionTargetDEtd" class="collapsibleTdRelease" width="100%" onclick="javascript:toggleHeader();">

and here

 $("td#ProductionTargetDEtd").click( //inside the toggleHeader function

so remove $("td#ProductionTargetDEtd").click( inside the toggleHeader and that should solve your click function

final outcome... replace toggleHeader with this

function toggleHeader(){
  $("div#ProductionTargetDEDiv").toggle(function(){
        $(this).animate({ height: 135 }, 200);
    },function(){
        $(this).animate({ height: 0 }, 200);
  });
}

and it should work

于 2013-01-07T13:05:26.823 に答える