Сохранение состояния меню вложенного аккордеона после обратной передачи

Question

У меня есть вложенное меню аккордеона, которое я заполнил вложенными элементами asp: Repeater на моей странице. Когда я нажал кнопку asp: Imagebutton, страница postbacks и мое вложенное меню аккордеона закрываются. Есть ли способ предотвратить гармоничное меню и сохранить его состояние. И да, я проверил другие вопросы, но я не могу найти какой-либо вложенный аккордеон.

Аккордеон Меню

 <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. Я установил значение скрытых полей по идентификатору подкатегории и идентификатору категории каждой команды строки.

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

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

      ... 


     } 

И тогда я получаю значение и скрытое открытое меню аккордеон на JQuery на стороне клиента на документ готов() функцию.

 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");