jquery切换与链接按钮无法正常工作

Question

y have a <div> tag that show a gridview that contains a LinkButton to show it detail, in the header of the div tag I have a button to toggle the <div , this Works great, I want that when i click on the linkbutton of the gridview, the gridview toggle, with this code, looks like it going to work but it make the effect to toggle but inmediatly and automaticaly show again. this is my asp code

<span class="expande_button expandeSurtido" data-ref="parciales"><i class="fa fa-chevron-circle-up">
  </i>Expandir documentos</span>
  <div id="parciales">
    <asp:GridView ID="uxGridViewPartials" runat="server" AutoGenerateColumns="false" Visible="false" Width="50%" >  
       <Columns>
        <asp:BoundField DataField="documentNumber" HeaderText="Folio" ItemStyle-CssClass="tdCenter" />
        <asp:BoundField DataField="date" HeaderText="Fecha" DataFormatString="{0:d}" ItemStyle-CssClass="tdCenter"/>                                
        <asp:TemplateField HeaderText="Seleccionar">
        <ItemTemplate>
          <div class="app_acciones divCentrar">
           <asp:LinkButton ID="uxLinkButtonSeleccionar" runat="server" Visible="true" 
            CssClass="app_button contrae" data-ref="parciales"
            OnClick="uxLinkButtonSeleccionar_Click"                                            
            CausesValidation="False">Ver
            </asp:LinkButton>                            
         </div>                            
        </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="pkProductDocument"  ItemStyle-CssClass="hide" HeaderStyle-CssClass="hide" />
        </Columns>
        <HeaderStyle CssClass="HeaderStyle" />
        <RowStyle HorizontalAlign="Center" />                            
      </asp:GridView>
   </div>

and this is my js

$('#contenedor').on("click", '.expandeSurtido', function() {
    $(this).children('i').toggleClass('fa-chevron-circle-down', 'fa-chevron-circle-up');
    $idPanel = $(this).attr('data-ref');
    $('#' + $idPanel).toggle("slow");
});

$('#contenedor').on("click", '.contrae', function() {
    $idPanel = $(this).attr('data-ref');
    $('#' + $idPanel).toggle("slow");
});

In mention, as you can see all is contained on a div with class called contenedor

Answer 1

The problem is that "OnClick" handers in ASP.NET web forms are server side functions, which then re-render the page after they are complete.

You're handler is working just fine, but then immediately returns to the server to deal with the click handler, and then re-renders the page (with the toggling reset to it's default state).

You shouldn't be using LinkButton for this (since those are pretty heavily tied to server controls). Just make it an a tag: <a href="#" class="contenedor">Ver</a> and add the handler to that, and it should work fine.