在回發之後保存嵌套式手風琴菜單的狀態

Question

我有一個嵌套的手風琴菜單，我用我的頁面上嵌套的asp：Repeater控件填充。當我點擊了asp：Imagebutton，頁面回傳和我的嵌套手風琴菜單關閉。有沒有辦法阻止手風琴菜單關閉並保存其狀態。是的，我檢查了其他問題，但我找不到任何嵌套式手風琴。

摺疊式菜單

 <div id="menu"> 
      <div id="nestedAccordion"> 
       <asp:Repeater runat="server" OnItemDataBound="rptCategories_ItemDataBound" ID="rptCategories"> 
        <ItemTemplate> 
         <h2><%#Eval("Name")%></h2> 
         <div> 
          <asp:Repeater runat="server" OnItemDataBound="rptSubCategories_ItemDataBound" ID="rptSubCategories"> 
           <ItemTemplate> 
            <h3 subcategoryid="<%#Eval("Id")%>"><%#Eval("Name")%></h3> 
            <div class="SubCat" id="products" subcategoryid="<%#Eval("Id")%>" style="width: 100%;"> 
             <asp:Repeater runat="server" OnItemCommand="rptProducts_ItemCommand" ID="rptProducts"> 
              <ItemTemplate> 
               <div class="SubCat" subcategoryid="<%#Eval("SubCategoryId")%>" style="float: left; cursor: pointer"> 
                <asp:ImageButton class="prod1" productid='<%#Eval("Id") %>' CommandName="Select" EnableViewState="true" CssClass="prodimgs" CommandArgument='<%#Eval("Id") %>' ImageUrl='<%# string.Format("Member/{0}",Eval("ImageUrlTiny"))%>' ID="btnImageUrl" runat="server" /> 
               </div> 
              </ItemTemplate> 
             </asp:Repeater> 
            </div> 
           </ItemTemplate> 
          </asp:Repeater> 
         </div> 
        </ItemTemplate> 
       </asp:Repeater> 

      </div> 

     </div> 

，我一定能低於

上下滑動的jQuery的代碼JQuery的

$(document).ready(function() { 
     var $parents = $('#nestedAccordion').find('div'); 
     var $childs = $('#nestedAccordion h3').find('div'); 
     var parentDivs = $('#nestedAccordion div'), 
      childDivs = $('#nestedAccordion h3').siblings('div'); 
     parentDivs2 = $('#nestedAccordion div div'); 
     parentDivs3 = $('#nestedAccordion div div div'); 

     $('#nestedAccordion h2').click(function() { 
      $parents.slideUp(); 

      if ($(this).next().is(':hidden')) { 
       $(this).next().slideDown(); 
      } else { 
       $(this).next().slideUp(); 
      } 
     }); 
     $('#nestedAccordion h3').click(function() { 
      var subcatId = $(this).attr("SubCategoryId"); 
      $childs.slideUp(); 
      $(this).siblings('div').slideUp(); 
      if ($(this).next().is(':hidden')) { 
       $(this).next().slideDown(); 
      } else { 
       $(this).next().slideUp(); 
      } 
      $(".SubCat[SubCategoryId=" + subcatId + "]").css("display", "block"); 

      var itemIndex = subcatId; 
      $("#hidMenuItem").val(itemIndex); 
     }); 
    }); 

感謝

Answer 1

我已經解決了這個問題有兩個隱藏的領域。一個用於子類別ID，另一個用於類別ID

正如你所看到的，我有一箇中繼器，並且我發佈了一個內置的圖像按鈕。我定義了「categoryid」和「subcategoryid」屬性。之後，我將使用該屬性再次打開我的手風琴菜單。

<asp:HiddenField runat="server" ID="hdnCategoryId" /> 
        <asp:HiddenField runat="server" ID="hdnSubCategoryId" /> 
        <div id="menu"> 
         <div id="nestedAccordion"> 
          <asp:Repeater runat="server" OnItemDataBound="rptCategories_ItemDataBound" ID="rptCategories"> 
           <ItemTemplate> 
            <h2 categoryid="<%#Eval("Id")%>"><%#Eval("Name")%> 
             <img align="right" src='images/frontend/buyukkapali.png'> 
            </h2> 
            <div class="Cat" categoryid="<%#Eval("Id")%>"> 
             <asp:Repeater runat="server" OnItemDataBound="rptSubCategories_ItemDataBound" ID="rptSubCategories"> 
              <ItemTemplate> 
               <h3 subcategoryid="<%#Eval("Id")%>"><%#Eval("Name")%><img align="right" class="oklar" src='images/frontend/close.png'></h3> 
               <div class="SubCat" id="products" subcategoryid="<%#Eval("Id")%>" style="width: 100%;"> 
                <asp:Repeater runat="server" OnItemCommand="rptProducts_ItemCommand" ID="rptProducts"> 
                 <ItemTemplate> 
                  <div class="SubCat" subcategoryid="<%#Eval("SubCategoryId")%>" style="float: left; cursor: pointer"> 
                   <asp:ImageButton class="prod1" productid='<%#Eval("Id") %>' CommandName="Select" EnableViewState="true" CssClass="prodimgs" CommandArgument='<%#Eval("Id") %>' ImageUrl='<%# string.Format("Member/{0}",Eval("ImageUrlTiny"))%>' ID="btnImageUrl" runat="server" /> 
                  </div> 
                 </ItemTemplate> 
                </asp:Repeater> 
               </div> 
              </ItemTemplate> 
             </asp:Repeater> 
            </div> 
           </ItemTemplate> 
          </asp:Repeater> 

         </div> 

        </div> 

這裏是我的.cs文件。我通過子類別ID和類別id每行命令設置hiddenfields值。

protected void rptProducts_ItemCommand(object source, RepeaterCommandEventArgs e) 
     { 
      ... 

      hdnCategoryId.Value = productModel.CategoryId.ToString(); 
      hdnSubCategoryId.Value = productModel.SubCategoryId.ToString(); 

      ... 


     } 

然後我通過jquery在文檔ready（）函數的客戶端上得到hiddenfield值並打開手風琴菜單。

 var subCatId = $("#<%= hdnSubCategoryId.ClientID %>").val(); 
     var catId = $("#<%= hdnCategoryId.ClientID %>").val(); 

     $("#nestedAccordion div[CategoryId='" + catId + "']").css("display", "block"); 
     $("#nestedAccordion div div[SubCategoryId='" + subCatId + "']").css("display", "block");