以编程方式创建 Bootstrap 手风琴

Question

我在 UpdatePanel 中有一个 Bootstrap Accordion。 当页面 PostBack 时，手风琴丢失并且没有按预期运行。 我怀疑这是因为部分回发重新创建了 Accordion 元素。

我需要知道如何通过 Javascript 创建手风琴？

Answer 1

但是，如果回发正在折叠相应的内容，那么通过代码创建一个回发会有什么不同呢？

我的意思是，您可以添加代码来“保存”用户的选择。

        <asp:Button ID="Button1" runat="server" Text="Post back button" />

        <div id="accordion" style="width:40%">
            <h3>Section 1</h3>
            <div>
                <p>
                    This is text of section 1.
                </p>
            </div>
            <h3>Section 2</h3>
            <div>
                <p>
                    this is text of section 2
                </p>
            </div>
            <h3>Section 3</h3>
            <div>
                                    <p>
                    this is text of section 3
                </p>

                <ul>
                    <li>List item one</li>
                    <li>List item two</li>
                    <li>List item three</li>
                </ul>
            </div>
            <h3>Section 4</h3>
            <div>
                <p>
                    this is text of section 4
                </p>
            </div>
        </div>

    </div>



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

    <script>


        //bind('accordionchange',
        //    function () {
        //        alert('Active tab index: ' + $(this).accordion('option', 'active'))
        //    });

        $(function () {
             SaveActive = $("#ActivePanel")
             WhichActive = parseInt(SaveActive.val())
             myacc = $("#accordion").accordion()
            myacc.accordion("option", "active", WhichActive);

            myacc.accordion("option", "event", "click").click(
                function () {
                    SaveActive.val(myacc.accordion("option", "active"))
                })
        });
    </script>

所以，上面有一个按钮（回发）。

但是，请注意我们如何将点击选择“保存”到隐藏字段中。

这样价值就会持续存在。

更好的是，我们的按钮点击事件可以显示，打开上面设置的第三个值。

所以，所以这个：

        <asp:Button ID="Button1" runat="server" Text="Post back button"
            OnClick="Button1_Click"
            />

背后的代码是这样的：

Protected Sub Button1_Click(sender As Object, e As EventArgs)

    ActivePanel.Value = 3 ' show 4th panel on click


End Sub

所以，现在当我们点击那个按钮时，我们有一个回发，我们设置面板

所以，我们看到这个：

所以，请注意我们如何将点击事件添加到面板选择中，并将其保存到隐藏字段中。

这不仅允许后面的代码获取放置（打开）的面板，而且还意味着我们可以设置隐藏字段的值，面板将打开该选择。

但是，我看不出编写代码如何解决您的问题，因为如果您通过代码添加手风琴，您仍然需要代码来保留（保存）当前选择以在回发后继续存在。

所以，最好只是设置一个隐藏字段。上面的美妙之处在于，你有自动设置和代码隐藏在任何时候都可以通过以下方式获取当前删除的部分：

 ActivePanel.Value

然后设置值

ActivePanel.Value = 2

既然我们将当前选择“保存”到那个隐藏字段中？

好吧，如果我们不触摸或设置 ActivePanel，它仍然会工作，并且仍然会记住用户当前的选择/设置——即使在页面上有回发。

你可以引入一个更新面板，但不管怎样，上面的都可以工作。