手风琴停止工作与更新面板
本文关键字:更新 停止工作 手风琴 | 更新日期: 2023-09-27 18:15:15
我在页面上有一个手风琴控件(使用jQuery)。当我将手风琴插入更新面板时,设置updatepanel
外部的按钮作为其触发器,并单击按钮,手风琴停止工作。如果我删除updatepanel,它开始工作。
为什么?我如何修复这个错误?我必须重新实例化手风琴脚本/插件,如果是,然后如何?
<script src="Scripts/ddaccordion.js" type="text/javascript"></script>
<script type="text/javascript">
ddaccordion.init({
headerclass: "silverheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit: function(headers, expandedindices) { //custom code to run when headers have initalized
//do nothing
},
onopenclose: function(header, index, state, isuseractivated) { //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="applemenu">
<div class="silverheader"><a href="http://www.dynamicdrive.com">Dynamic Drive</a></div>
<div class="submenu">
Some random content here<br />
</div>
<div class="silverheader"><a href="http://www.dynamicdrive.com/style/" >CSS Examples</a></div>
<div class="submenu">
Some random content here<br />
</div>
<div class="silverheader"><a href="http://www.javascriptkit.com">JavaScript Kit</a></div>
<div class="submenu">
Some random content here<br />
</div>
<div class="silverheader"><a href="http://www.cssdrive.com">CSS Drive</a></div>
<div class="submenu">
Some random content here<br />
<img src="http://i27.tinypic.com/sy7295.gif" />
</div>
<div class="silverheader"><a href="http://www.codingforums.com">Coding Forums</a></div>
<div class="submenu">
Some random content here<br />
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
当元素从DOM中删除时,它们的事件处理程序也随之删除,即使您将它们替换为相同的元素。您需要重新初始化事件处理程序,或者考虑使用jQuery的.live()
功能。
您需要维护Jquery小部件的结构。我用更新面板包围了accordiondiv的子div中的控件,实现了您想要的效果。因此,您应该维护以下结构:
- 手风琴Div
- 标题3子div 1的标题
- div 1
- 更新面板
- 将使用Ajax技术刷新的div 1内容
等等,当然你需要脚本管理器所以别忘了插入一个:)