javascript - 尝试在 TD 标签的 Click 事件上切换 Div，但遇到问题

Question

我正在尝试使用 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 的标记中，然后解决了第一次点击问题。

Answer 1

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

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

这里

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

这里

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

因此删除 toggleHeader 内的 $("td#ProductionTargetDEtd").click( ，这应该可以解决您的点击功能

最终结果...替换 toggleHeader 与此

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

它应该可以工作