在GridView中展开/折叠项目

Question

我的JavaScript能够在任何页面上正常工作。我想使用相同的代码来展开/折叠ASP.NET GridView中的项目字段。以下代码仅适用于第一个项目，但不适用于其他项目。有任何想法吗？

<script type="text/javascript"> 
    jQuery(function ($) { 
     var setupModule = function() { 
      $('#panels-demo').dnnPanels(); 
      $('#panels-demo .dnnFormExpandContent a').dnnExpandAll({ 
       targetArea: "panels-demo" 
      }); 
     }; 
     setupModule(); 
     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() { 
      // note that this will fire when _any_ UpdatePanel is triggered, 
      // which may or may not cause an issue 
      setupModule(); 
     }); 
    }); 
</script> 

ASPX页面：

<ItemTemplate> 
       <div class="dnnForm" id="panels-demo"> 
        <div class="dnnFormExpandContent"><a href="#">Expand All</a></div> 
        <h2 id="tabPassport" class="dnnFormSectionHead"><a href='<%# "#" & Eval("ApplicationID") %>'>Options</a></h2> 
        <fieldset class="dnnClear"> 
         <img src="<%=ResolveUrl("/images/passport.jpg") %>" alt="Passport upload" class="dnnLeft" style="width: 10px; height: 10px" /> 
         <div class="dnnRight" style="width: 90%; margin-left: 2%"> 

          <label>Email user</label> 

          <asp:Label runat="server" ID="StatusLabel"></asp:Label> 
         </div> 
        </fieldset> 
       </div> 
      </ItemTemplate> 

Answer 1

这个添加到页面折叠所有项目（编辑 'DIV [ID^=“面板，演示' 用自己的jQuery选择!!!）：

<pre> 
<script type="text/javascript"> 
    jQuery(function ($) { 
     //collapse panels 
     $('div[id ^= "panels-demo"] a').removeClass('dnnSectionExpanded');   
     $('fieldset.dnnClear').hide(); 
    }); 
</script> 
</pre> 

添加此扩展的所有项目：

<pre> 
<script type="text/javascript"> 
    jQuery(function ($) { 
     //expand paneles 
     $('div[id ^= "panels-demo"] a').addClass('dnnSectionExpanded'); 
     $('fieldset.dnnClear').show(); 
    }); 
</script> 
</pre>