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