Javascript 尝试切换TD标签的Div on Click事件，但遇到问题

我试图使用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>

现在所有这些都应该做的是，当我点击TD标签时，DIV应该向下滑动，然后点击它应该向上滑动。除1个异常外，上述方法工作正常：

1） 在第一次单击时，什么也没有发生，只有在第二次单击时，DIV会平稳地上下滑动

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

onclick="javascript:toggleHeader()" 

---

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

为什么要为ProductionTargetDEDiv单击使用触发器…删除它

您正在调用

td#ProductionTargetDEtd

单击事件两次。。一个在你的html中

这里

因此，删除

$（“td#ProductionTargetDEtd”）。单击
切换标题中的（
），这将解决您的单击功能

最终结果…将
toggleHeader
替换为以下内容

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

正如我在第3个问题点中提到的，如果我不为$（“div#ProductionTargetDEDiv”）添加触发器，它应该可以工作；不再发生切换。仅在添加此行时，才会发生切换。这是来自此stackoverflow条目的引用，而不是单击的触发器，我们正在
ProductionTargetDEtd
元素中进行此操作。您是否尝试过上述代码Hi-bipen，最新更新：请阅读我对上述问题的评论。我遵循了您的代码above plus我在第$行（“td#ProductionTargetDEtd”）.removeAttr（“onclick”）；下面添加了一个命令，以防止由于从内联javascript代码“onclick=”javascript:toggleHeader（）调用jQuery Click-toggle方法而导致重复单击事件的发生；“在这之后，一切都解决了，除了第一次单击没有发生任何事情……之后一切都顺利发生v:）你能帮我解决最后一点吗。基于其他stackoverflow链接，我意识到，因为我使用内联javascript->onclick=“javascript:toggleHeader（）；”调用我的jQuery代码“因此，单击事件发生了两次，因此现在我添加了$（“td#ProductionTargetDEtd”）。removeAttr（“onclick”）；在我的jQuery代码中，它现在运行良好。唯一的问题是幻灯片在第一次单击时不起作用。之后一切都很顺利
onclick="javascript:toggleHeader()" 

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

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

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