ASP.Net Panel JQuery SlideToggle Postback

我有一個隱藏它的樣式的asp.net面板，我使用JQuery來滑動使用超鏈接的面板。這工作正常。但是，如果我在頁面上添加一個導致回發的按鈕，面板將默認回隱藏。我明白爲什麼會發生這種情況，但發生回發時保持面板可見性狀態的最佳方式是什麼？ASP.Net Panel JQuery SlideToggle Postback

<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>

來源

2010-04-14 Germ

以下是我解決我的問題......

<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>

來源

2010-04-14 17:57:14 Germ

我也一樣。但我希望面板在表單加載時隱藏。我嘗試了幾件事，沒有奏效。你能告訴我我需要改變什麼嗎？優秀的答案btw。 – Partha 2014-10-17 21:19:19

添加一個隱藏字段形式：

<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>

來源

2010-04-14 17:34:27 TheVillageIdiot

謝謝對於這個想法@TheVillageIdiot – Germ 2010-04-14 17:57:54

ASP.Net Panel JQuery SlideToggle Postback

回答

相關問題