Question

我在asp.net aspx weppage上有一个jquery手风琴。在窗格内，我有asp.net按钮。当我单击按钮，我所在的窗格，关闭并重新加载页面，默认为第一个窗格。我不介意重新加载，但有没有办法在重新加载后保持当前窗格打开。现在，我只是在带有手风琴ID的div上调用accordion（）。

Answer 1

您可以使用隐藏的输入字段在回发期间保持活动的折叠式索引，然后在手风琴的更改事件期间使用javascript填充它。

<asp:HiddenField ID="hidAccordionIndex" runat="server" Value="0" />

<script language="javascript" type="text/javascript">
    $(function(){
        var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());

        $("#accordion").accordion({
            autoHeight:false,
            event:"mousedown",
            active:activeIndex,
            change:function(event, ui)
            {
                var index = $(this).children('h3').index(ui.newHeader);
                $('#<%=hidAccordionIndex.ClientID %>').val(index);
            }
        });
    });
</script>

您可能会在更改事件期间提出一种更有效的方法来捕获活动索引，但这似乎有效。

页面加载后，它会从隐藏字段中检索活动索引并将其存储在变量中。然后，它使用检索到的索引和自定义函数初始化手风琴，以触发change事件，每当激活新窗格时，该事件会将新索引写入隐藏字段。

在回发期间，隐藏字段值将保留在ViewState中，以便在再次加载页面时，可以使用单击最后一个窗格的索引初始化折叠。

Answer 2

MaxCarey的解决方案似乎运行良好，但最新版本的jQuery UI（1.10.4）似乎有一些差异。正确的事件没有被改变＆＃34;现在，但是＆＃34;激活＆＃34; （或＆＃34; beforeActivate＆＃34;，如果你想要取消该事件的选项）。

<asp:HiddenField runat="server" ID="hidAccordionIndex" Value="0" />
...

$(document).ready(function () {
    var activeIndex = parseInt($("#<%=hidAccordionIndex.ClientID %>").val());

    $("#accordion").accordion({
        heightStyle: "content",
        active: activeIndex,
        activate: function (event, ui) {
            var index = $(this).children('h3').index(ui.newHeader);
            $("#<%=hidAccordionIndex.ClientID %>").val(index);
        }
    });
});

这里的问题是我可以验证hidAccordionIndex值是否设置为正确的值，但是在回发时，无论我尝试什么，它都会被设置回0。我已尝试将其设置为空字符串，如Dave.Lebr1建议的那样，但它仍然不会继续回发。

这应该在回发时保持可用，因为我的divAccordionIndex字段应该有ViewState（我已经验证它已启用）。

还有其他人有过这方面的成功吗？此菜单位于我的母版页中，除此之外，它的效果很好。

Answer 3

使用ClientScript.RegisterStartupScript写入按钮按下的手风琴窗格的索引或ID。假设用户单击窗格3中名为btnSubmit的按钮，那么它将按以下方式工作：

protected void btnSubmitClick(object sender, EventArgs e)
{
    //process button click

    //class this function at end:
    SetAccordionPane(3);
}

//you can call this function every time you need to set specific pane to open
//positon
private void SetAccordionPane(int idx)
{
    var s="<script type=\"text/javascript\">var paneIndex = "
      + idx +"</script">; 
    ClientScript.RegisterStartupScript(typeof(<YourPageClass>, s);
}

现在使用javascript：

$(function(){

    if(paneIndex)
    {
        $('.selector').accordion({active: paneIndex});
    }
    else
    {
        $('.selector').accordion();
    }
});

Answer 4

我知道这已经很晚了，但它仍然可以帮助有人挣扎。这里的解决方案基本上是上述一些智慧的组合。 ; - ）

我正在使用jquery-ui-1.10.4.custom.min.js 和jquery-1.6.3.min.js。

 <%--the hidden field saves the active tab during a postback--%>
        <asp:HiddenField ID="hdLastActive" runat="server" Value="0" />
    </div>
</form>

这是javaScript：

<script type="text/javascript">
$(document).ready(function () {
    // get the last active tab index -or 0 on initial pagee load- to activate the tab
    var activeTab = parseInt($("[id$='hdLastActive']").val());

    // initialize the accordion to the activeTab and set the activate event to save the last active tab index.
    $("#accordion").accordion({
        active: activeTab,
        activate: function (e) {
            // save the active tab index in the hidden field
            $("[id$='hdLastActive']").val($(this).accordion("option", "active"));                
        }
    });
});

Answer 5

扩展以前的HiddenField创意，但不必破坏你的JS：

在您的信息页中：

<asp:HiddenField runat="server" ID="hidAccordionIndex" Value="0" ClientIDMode="Static" />

在你的JS中：

$('#yourAccordion').accordion({
    heightStyle: "content"
    , active: parseInt($('#hidAccordionIndex').val())
    , activate: function (e, ui) {
        $('#hidAccordionIndex').val($(this).children('h3').index(ui.newHeader));
    }
});

密钥是ClientIDMode =“Static”。这种方法几乎不需要修改就可以使用几乎任何服务器端语言，因为JS不必更改，只需要更改一个隐藏字段。

Answer 6

正在我这边工作请检查......

$(document).ready(function () {
    var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());
    alert(activeIndex);
    $("#accordion").accordion({            
        active: activeIndex,
        beforeActivate: function (event, ui) {                
            var index = $(this).children('h3').index(ui.newHeader);
            $('#<%=hidAccordionIndex.ClientID %>').val(index);                
        }            
    });        
});

Answer 7

放置可能必须在“更新”面板中单击或更新的按钮或gridview。然后ui手风琴将100％正常工作+保证.. Sarath @ f1

Answer 8

创建手风琴时使用“active”选项。像这样：

$('.selector').accordion({ active: 2 });

这将激活手风琴中的第二个选项。您还可以传递选择器以按ID进行选择。

Answer 9

$("#accordion").accordion({
    heightStyle: "content",
    collapsible: true,
    navigation: true
});

将navigation属性设置为true将保留手风琴小组的状态。

Answer 10

添加到MaxCarey的帖子...
获得新手风琴指数的更可靠方法是

change: function (event, ui) {
    var index = $(this).accordion("option", "active");
    $("#<% =hidAccordionIndex.ClientID %>').val(index);
}

Answer 11

我遇到了同样的问题。 1. MaxCarey的答案看起来很好，足以解决问题，但遗憾的是我的手风琴没有ID。（我使用的是第三方模板，他们只使用css类）。 2. Imran H. Ashraf也很好，但同样的问题是ID不能使用手风琴。

我的问题：我手风琴中有一个带有编辑更新取消命令的DetailsView。 2.当我点击编辑按钮时，它可以工作，但我的手风琴会关闭。

我的解决方案： 1.我在表单上放了一个ScriptManager。我在手风琴里放了一个UpdatePanel。 3.我将DetailsView放在UpdatePanel中。那就是它，没有编码，没有代码，它工作正常。

这是html标记：

<div class="accordion-wrapper first-child">
<a href="javascript:void(0)" class="accordion-title orange"><span>Personal Information</span></a>
<div class="accordion" style="display: none;">
    <div class="iqb-field-area">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:DetailsView ID="dvPersonalInfo" runat="server" Height="50px" Width="100%" AutoGenerateRows="False"
                    DataSourceID="dsPersonalInfo">
                    <Fields>
                        <asp:BoundField DataField="PTCP_FullName" HeaderText="Full Name" ReadOnly="True"
                            SortExpression="PTCP_FullName" />
                        <asp:BoundField DataField="PTCP_ContactNumber" HeaderText="Contact Number" SortExpression="PTCP_ContactNumber" />
                        <asp:BoundField DataField="PTCP_email" HeaderText="e-mail" SortExpression="PTCP_email" />
                        <asp:BoundField DataField="PTCP_PhysicalAddress" HeaderText="Physical Address" SortExpression="PTCP_PhysicalAddress" />
                        <asp:CommandField ShowEditButton="True">
                            <ControlStyle CssClass="right button" />
                        </asp:CommandField>
                    </Fields>
                </asp:DetailsView>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</div>

希望它可以帮到某人。

由于快乐编码

Answer 12

我使用此解决方案使其适用于我的项目，但有些东西无效。

首先，手风琴不会将指数保留在记忆中，因此手风琴每次都会重新初始化。

其次，我无法找到'#<%=hidAccordionIndex.ClientID %>'

的隐藏字段

所以，我的工作是

1-将隐藏字段默认值设置为空

<asp:HiddenField ID="hidAccordionIndex" runat="server" Value="" />

2-使用此

获取活动索引

确保parseInt，否则无效

 var activeIndex = parseInt($('input[id$=hidAccordionIndex]').val());

有我的javascript代码：

  $("#accordion").accordion
({
        autoHeight:false,
        event: "mousedown",
        active: activeIndex,
        collapsible: true,
        change: function (event, ui) 
        {
            var index = $(this).accordion("option", "active");
            $('input[id$=hidAccordionIndex]').val(index);
        }
});

Answer 13

        var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());       

        $("#accordion,#inneraccordian").accordion({
            heightStyle: "content",
            collapsible: true,
            navigation: true,
            active: activeIndex,
            beforeActivate: function (event, ui) {
                var index = $(this).children('h3').index(ui.newHeader);
                $('#<%=hidAccordionIndex.ClientID %>').val(index);
            }
        });

ASP.NET回发后保持当前的jQuery手风琴窗格打开？

13 个答案:

确保parseInt，否则无效