Question

有一个<div>标记显示包含LinkButton的网格视图以显示详细信息，在div标记的标题中我有一个切换<div的按钮，这个工作得很好，我希望当我点击gridview的链接按钮时，gridview切换，使用此代码，看起来它会起作用，但它会使效果切换，但inmediatly和automaticaly再次显示。这是我的asp代码

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

这是我的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");
});

提到，正如您所看到的，所有内容都包含在一个名为contenedor

的类的div中

Answer 1

问题是ASP.NET Web表单中的“OnClick”处理程序是服务器端功能，然后在页面完成后重新呈现页面。

你的处理程序工作正常，但随后立即返回服务器处理点击处理程序，然后重新呈现页面（将切换重置为默认状态）。

你不应该为此使用LinkButton（因为它们与服务器控件密切相关）。只需将其标记为： <a href="#" class="contenedor">Ver</a>并将处理程序添加到该处理程序，它应该可以正常工作。

使用链接按钮，jquery切换功能无法正常工作

1 个答案: