ASP.Net Panel JQuery SlideToggle Postback

Question

我有一個帶有隱藏它的樣式的asp.net面板，我正在使用JQuery來滑動使用超鏈接切換面板。 這很好用。 但是，如果我在頁面上添加一個導致回發的按鈕，則面板將默認返回隱藏狀態。 我理解為什么會發生這種情況但是在發生回發時保持面板可見性狀態的最佳方法是什么？

<head runat="server">
    <title></title>

    <script type='text/javascript' src="jquery-1.4.1.min.js">
    </script>

    <style type="text/css">
        .panel
        {
            display: none;
        }
    </style>

    <script type="text/javascript">
        $(function() {
            $("#Link1").click(function(evt) {
                evt.preventDefault();
                $('#panelText').slideToggle('slow');
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:HyperLink ID="Link1" runat="server" NavigateUrl="#">SlideToggle
    </asp:HyperLink><br />
    <asp:Panel ID="panelText" runat="server" CssClass="panel">
        Some text</asp:Panel>
    <asp:Button ID="button1" runat="server" Text="Postback" />
    </form>
</body>
</html>

Answer 1

這就是我解決問題的方法......

<head runat="server">
    <title></title>

    <script type='text/javascript' src="jquery-1.4.1.min.js">
    </script>

    <style type="text/css">
        .panel
        {
            display: none;
        }
    </style>

    <script type="text/javascript">
        $(function() {
            $("#Link1").click(function(evt) {
                evt.preventDefault();
                $('#panelText').slideToggle('slow');
                if ($('#panelText').hasClass('panel')) {
                    $('#PanelState').attr('value', 'true');
                } else {
                    $('#PanelState').attr('value', 'false');
                }                
             });
        });

        $(document).ready(function() {
            if ($('#PanelState').attr('value') == 'false') {
                $('#panelText').addClass('panel');
            }
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:HiddenField ID="PanelState" runat="server" Value="false" />
    <asp:HyperLink ID="Link1" runat="server" NavigateUrl="#">SlideToggle
    </asp:HyperLink><br />
    <asp:Panel ID="panelText" runat="server">
        Some text</asp:Panel>
    <asp:Button ID="button1" runat="server" Text="Postback" />
    </form>
</body>
</html>

Answer 2

在表單中添加隱藏字段：

 <asp:HiddenField id="hdnPanelState" runat="Server" value="false" />

並修改JS函數：

<script type="text/javascript">
    $(function() {
        $("#Link1").click(function(evt) {
            evt.preventDefault();
            $('#panelText').slideToggle('slow');
            //YOU WILL ALSO NEED TO CALCULATE IF SHOWING PANEL OR HIDING 
            $("#hdnPanelState").attr("value","true");//Store Value
        });
    });
</script>

ASP.Net Panel JQuery SlideToggle Postback

問題描述

2 個解決方案

解決方案1
6 已采納 2010-04-14 17:57:14

解決方案2
4 2010-04-14 17:34:27

ASP.Net Panel JQuery SlideToggle Postback

問題描述

2 個解決方案

解決方案1 6 已采納 2010-04-14 17:57:14

解決方案2 4 2010-04-14 17:34:27

解決方案1
6 已采納 2010-04-14 17:57:14

解決方案2
4 2010-04-14 17:34:27