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

时间:2016-02-21 00:20:42

标签: jquery asp.net accordion repeater

我有一个嵌套的手风琴菜单,我在页面上填充了嵌套的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);
        });
    });

由于

1 个答案:

答案 0 :(得分:0)

我已经用两个隐藏的字段解决了这个问题。一个用于子类别ID,另一个用于类别id

正如你所看到我有一个转发器,我发布了支持里面的图像按钮。我定义了&#34; categoryid&#34;和&#34; subcategoryid&#34;属性。之后,我将使用该属性再次打开我的手风琴菜单。

<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获取隐藏字段值并打开手风琴菜单。

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