Question

我正在尝试使用jQuery基于TD标签的click事件切换（增加和减少高度）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

所以删除$("td#ProductionTargetDEtd").click(中的toggleHeader，这应解决您的点击功能

最终结果......用此

替换toggleHeader

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

它应该有效

尝试切换TD标签的Div on Click事件，但面临问题

1 个答案: