Question

我正在开发一个新网站TheDigitalScale，我正在使用jQuery创建一个功能列表，在单击时展开div并再次单击关闭div。

<script type="text/javascript">
$(document).ready(function()
{
  //hide the all of the element with class msg_body
  $(".msg_body").hide();
  //toggle the componenet with class msg_body
  $(".msg_head").click(function()
  {
    $(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
  });
});
</script>



<div class="msg_list">
    <p class="msg_head">They Forgot The Buttons</p>
    <div class="msg_body"><p>
    Just kidding. The MXT has nifty touchscreen controls so you never have to worry about buttons getting dirty or broken. 
    </p></div>
    </div>

它运行正常但是，我还有一个产品评论链接，它使用JavaScript do_PostBack函数来扩展评论面板。

<a href="javascript:__doPostBack('ctl00$wpm$ShowProduct$ctl07$ReviewLink','')">Review and Rate this item</a>

单击查看链接时，会导致所有jQuery div扩展。

当我将enablepartialrendering设置为false并且“修复”了问题时，但是当点击评论链接时，它会将用户带到页面顶部并展开评论面板，而不是仅展开评论面板并让用户保持正确的地方。

我希望我解释得这么好;我是jQuery，JavaScript和AJAX的新手。

此致沙拉

修改

我想我并没有真正提出问题......

我可以更改哪些内容以使审核链接扩展审核面板并将用户保留在该区域中，而不会扩展每个jQuery div？

以下是产品页面的链接：MBSC-55

Answer 1

看起来你有嵌套的updatepanels。尝试将父面板的UpdateMode property设置为Conditional，以防止子更新面板触发父更新面板。

Answer 2

好的，我想我知道发生了什么。加载页面时，执行以下代码：

$(document).ready(function(){
  //hide the all of the element with class msg_body
  $(".msg_body").hide();

  //toggle the componenet with class msg_body
  $(".msg_head").click(function()  {
    $(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
  });
});

现在，当.net执行回发时，它会重新创建那些.msg_body和.msg_head元素。最好的解决方案是让.net不要替换它们（除非你需要它们）。

如果你需要那些重绘，你可以做两件事。首先，将.msg_body设置为隐藏在css中，默认情况下隐藏它们。然后，要处理点击问题，请将您的点击代码替换为：

  $(".msg_head").live("click", function()  {
    $(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
  });

这将导致单击处理程序仍适用于新添加的.msg_head项目。

当点击JavaScript do_PostBack链接时，jQuery切换Div扩展

2 个答案: