Question

我需要在脚本中进行一些修改但不能这样做，因为我对jquery不太友好

当页面回发时我想维护面板的状态。现在，如果我刷新页面，所有面板都会折叠，

我正在使用以下代码

$(document).ready(function() {
    $(“DIV.ContainerPanel > DIV.collapsePanelHeader > DIV.ArrowExpand”).toggle(function() {
        $(this).parent().next(“div.Content”).show(“slow”);
        $(this).attr(“class”, “ArrowClose”);
    },function() {
        $(this).parent().next(“div.Content”).hide(“slow”);
        $(this).attr(“class”, “ArrowExpand”);
    });
});

请帮忙

Answer 1

您要求的是记住当前打开的面板。

由于此面板不是本机的asp.net控件，因此asp.net不会在回发中记住该值。

一种解决方案是在容器中保留隐藏的输入控件，并在该输入中保持当前打开的div的值。

然后，即使在回发中，Asp.net也会接收并发回这些数据。

在准备好文档后，您可以通过读取此值重新打开打开的面板。

编辑添加了一些代码

从你的选择器中，我假设你的html看起来像这样。

<div class="ContainerPanel">
    <div class="collapsePanelHeader">
        <div class="ArrowExpand"">

        </div>
    </div>
    <div id="content1" class="Content"">

    </div>
    <div class="collapsePanelHeader">
        <div class="ArrowExpand"">

        </div>
    </div>
    <div id="content2" class="Content"">

    </div>
    <input id="selectPanel1" runat="server" class="selectPanel"/>
</div>

我为每个内容块添加了一个id。如果您没有ID，则必须添加它们才能使此代码生效。

请注意ContainerPanel底部的输入标记。这将需要记住哪个div是开放的。 asp.net需要每个元素的唯一id标记。

<input id="selectPanel1" runat="server" class="selectPanel"/>

js就像：

$(document).ready(function() {
    $("div.ContainerPanel > div.collapsePanelHeader > div.ArrowExpand").toggle(function() {
        $(this).parent().next("div.Content").show("slow");
        $(this).attr("class", "ArrowClose");
        //Put the id of the selected content into an input
        //This is so that it goes to the server
        var inputBox = $(this).parent().parent().find(".selectPanel");
        inputBox.val("#" + $(this).parent().next("div.Content").attr("id"));
    },function() {
        $(this).parent().next("div.Content").hide("slow");
        $(this).attr("class", "ArrowExpand");
    });
    //This supports multiple ContainerPanel divs.
    $("div.ContainerPanel").each(function(e){
        //retrive value of div open before postback and show it
        var selectedContentId = $(this).find(".selectPanel").val();
            if(selectedContentId != "")
            $(selectedContentId).show();
    }); 
});

Answer 2

答案将完全按照您的要求进行，我不知道您正在创建什么，或者回发的原因 - 但您可能会发现最好的方法是消除回发，并处理它ajax jQuery，将阻止您遇到的所有问题，并创建更快，更友好的用户体验。

我不知道你在做什么或者你可能遇到什么样的安全问题，但如果这是一个选项，请查看ajax，这是为了记住页面状态所需的大量代码

Answer 3

我花了两天时间在自己的代码中处理这个挑战。我需要能够从jQuery或Code中扩展或折叠九个不同的面板，甚至可以从展开/折叠图标展开，并将回发保持在最低限度。我还需要在输入时捕获每个文本框，ddl，复选框值。

我的解决方案是一个与jQuery交互并管理会话结构的Web服务。然后，代码和jQuery代码可以与Web服务共享数据。

我在结构中保留的一组值是一个标志，告诉我面板是展开还是折叠。

虽然这对您的问题可能有点过分，但这种解决方案的灵活性非常强大。通过将大块数据定义为单个类结构，我可以读取和更新1-3行代码中的任何内容。

Jquery可折叠面板 - 回发问题

3 个答案: