Bootstrap手风琴防止在asp.net上回发崩溃 [英] Bootstrap accordion prevent collapse on postback in asp.net

问题描述

我有一个bootstrap手风琴，我尝试重新打开回发上最后打开的窗格，就像有人点击我页面上的保存按钮一样。我找到了这个解决方案：保留Twitter Bootstrap在页面刷新/导航上折叠状态

I have a bootstrap accordion where i try to reopen the last opened pane on a postback as in if someone clicks a save button on my page. I found this solution: Retain Twitter Bootstrap Collapse state on Page refresh/Navigation

但我无法对其发表评论，因为我没有足够的积分作为用户。

but am unable to comment on it since i don't have enough points as a user.

出于某种原因，我无法使该功能起作用：

For some reason i can't make the function work:

//when a group is shown, save it as the active accordion group
$("#applicant-accordion").bind('shown', function () {
    var active = $("#applicant-accordion .in").attr('id');
    $.cookie('activeAccordionGroup', active)
});

我正在尝试在FireBug中测试它，但我从来没有使用var激活的行。它停在$（＃applicant-accordion）.bind的行。我已经尝试将.bind更改为.on，因为我的jQuery是版本1.7.2

I'm trying to test it in FireBug but I never get to the line with var active. It stops at the line with $("#applicant-accordion).bind. I've tried changing the .bind to .on since my jQuery is version 1.7.2

我很茫然，我希望你能引导我找到解决方案。我在ASP.NET中构建它。

I'm at a loss and i hope you can guide me towards a solution. I am building it in ASP.NET.

<script src="../Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap/js/bootstrap.js" type="text/javascript" />
<link href="../Scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js" />

<script type="text/javascript">
    $(document).ready(function () {
        var last = $.cookie('activeAccordionGroup');
        if (last != null) {
            //remove default collapse settings
            $("#applicant-accordion .panel-collapse").removeClass('in');
            //show the account_last visible group
            $("#" + last).addClass("in");
        }
    });

    //when a group is shown, save it as the active accordion group
    $("#applicant-accordion").on('shown', function () {
        var active = $("#applicant-accordion .in").attr('id');
        $.cookie('activeAccordionGroup', active)
    });

</script>

    <div class="accordion" id="applicant-accordion">
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#uInfo">Applicant information</a>
            </div>
            <div id="uInfo" class="accordion-body collapse in">
                <div class="accordion-inner">
                </div>
            </div>
        </div>

        <asp:Panel Visible="false" runat="server" ID="assistancePanel">
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#meetgreet">Accommodation and Meet & Greet information</a>
                </div>
                <div id="meetgreet" class="accordion-body collapse">
                    <div class="accordion-inner">
                    </div>
                </div>
            </div>
        </asp:Panel>

        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#application">Application, documents & options</a>
            </div>
            <div id="application" class="accordion-body collapse">
                <div class="accordion-inner">
                </div>
            </div>
        </div>

        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#comments">Comments</a>
            </div>
            <div id="comments" class="accordion-body collapse">
                <div class="accordion-inner">
                </div>
            </div>
        </div>

        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#changelog">Changelog</a>
            </div>
            <div id="changelog" class="accordion-body collapse">
                <div class="accordion-inner" runat="server" id="changelogItems">
                </div>
            </div>
        </div>
    </div>

推荐答案

只是发布我的解决方案：

Just to post my solution:

添加了一个隐藏字段：

<asp:HiddenField ID="hfAccordionIndex" runat="server" />

页面底部的JavaScript确保DOM具有以下元素：

And the JavaScript at the bottom of the page to make sure the DOM has the elements:

<script type="text/javascript">
    $(document).ready(function () {
        var last = $('#<%= hfAccordionIndex.ClientID %>').val();
        if (last != null && last != "") {
            //remove default collapse settings
            $("#applicant-accordion .collapse").removeClass('in');
            //show the account_last visible group
            $("#" + last).collapse("show");
        }
    });

    //when a group is shown, save it as the active accordion group
    $("#applicant-accordion").on('shown', function () {
        var active = $("#applicant-accordion .in").attr('id');
        $('#<%= hfAccordionIndex.ClientID %>').val(active);
    });
</script>

这篇关于Bootstrap手风琴防止在asp.net上回发崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！