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 脚本标签中，我通过给出 height = 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）在第一次点击时，什么都没有发生，只有在第二次点击和以后，DIV 平滑地向下和向上滑动

令人惊讶的是，如果我不使用内联 javascript 调用调用 Javascript 方法 toggleHeader()

onclick="javascript:toggleHeader()"

相反，我将所有 jQuery 代码放在 JSP 的标签中，然后这个第一次点击问题就解决了。

4

1 回答 1

0

为什么你需要触发 ProductionTargetDEDiv 点击...删除它..

您正在调用td#ProductionTargetDEtd两次单击事件.. 一个在您的 html 中

这里

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

和这里

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

所以删除$("td#ProductionTargetDEtd").click(里面toggleHeader 应该解决你的点击功能

最终结果...替换toggleHeader为

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

它应该可以工作

于 2013-01-07T13:05:26.823 回答