Question

亲爱的所有我在我的网页中有多个asp面板，在页面加载时设置为visible = false，并在单击特定链接按钮时打开，工作正常，但现在我想给它一个慢动作效果或崩溃相应地扩大效果。任何人都可以分享他们的经验。

var json2 = "[{\"id\":1,\"datetime\":04/10/2017,\"col1\":1,\"col2\":2,\"col3\":3}]"

Answer 1

您可以使用jQuery来显示和隐藏面板（HTML中仅<div>'s）。它具有滑动功能，可以节省往返服务器的次数。

<asp:Panel ID="Panel1" runat="server" style="display: none;">
    content
</asp:Panel>

<input type="button" value="Slide Panel" onclick="slidePanel('<%= Panel1.ClientID %>')" />

<script type="text/javascript">
    function slidePanel(div) {
        if ($('#' + div).css('display') == 'none') {
            $('#' + div).slideDown('medium', function () { });
        } else {
            $('#' + div).slideUp('medium', function () { });
        }
    }
</script>

但是，如果由于Panel1中的内容而需要进行回帖，则可以在完成后调用slidePanel函数。

protected void Button1_Click(object sender, EventArgs e)
{
    Panel1.Visible = true;

    //set the dom visibility to none
    Panel1.Attributes.Add("style", "display:none");

    //call the function to slide the panel open
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "slidePanel", "slidePanel('" + Panel1.ClientID + "')", true);

    //or with a 1 second delay (1000 ms)
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "slidePanel", "setTimeout(function () { slidePanel('" + Panel1.ClientID + "'); }, 1000);", true);
}

如何在点击事件中给面板折叠和扩展效果

1 个答案: