回发后保存嵌套手风琴菜单的状态

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

如您所见，我有一个转发器，我 post 支持其中的图像按钮。我定义了 "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 设置隐藏字段值。

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

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

            ...


        }

然后我在客户端的文档 ready() 函数上通过 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");

回发后保存嵌套手风琴菜单的状态

Saving state of a nested-accordion menu after postback

asp.net

jquery

repeater

accordion