如何使手风琴标题在页面加载时全部折叠？

Posted 2023-05-09

【中文标题】如何使手风琴标题在页面加载时全部折叠？

【英文标题】：how to make accordion headers all collapsed initially on page load?

【发布时间】：2011-05-26 23:43:06

【问题描述】：

I added this script on my page..it didnt work

    <script type="text/javascript">
    $(document).ready(function()
      $("#accordion").accordion(  active: false, collapsible: true );
    );

我的手风琴

<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true"  Visible="true" AutoSize="None"SelectedIndex="0" RequireOpenedPane="false"  TransitionDuration="250" 
HeaderCssClass="accordionHeader toggler" ContentCssClass="accordionContent expanded toggler">
                <HeaderTemplate>

                    <b style="color: Black">

                        <%#Eval("Ques")%>
                    </b>

                </HeaderTemplate>


                <ContentTemplate>
                <p> <%#DataBinder.Eval(Container.DataItem, "QuesAns")%></p>

                </ContentTemplate>
            </cc1:Accordion>

我看到第一个标题在页面加载时展开。如何让它们在页面加载时全部折叠？

【问题讨论】：

ID 是 Accordion1。但是 .net 脚本有一些东西可以将 id 变成更长的字符串。运行页面后查看源代码并查看其中的 ID 以了解它的真实含义。

您确定您的服务器控件 cc1:Accordion 支持 $.accordion 吗？

是的！我很确定。怎么回事？

【参考方案1】：

有一个简单的解决方法 - 只需设置 SelectedIndex="-1" 而不是“0”（加上 RequireOpenedPane="false" 但它已经在您的标记中设置）..您真的不需要那个花哨的 onReady 脚本。

【讨论】：

但在页面加载时仍会打开第一个 Accoridan 窗格。

【参考方案2】：

我认为你的选择器是错误的。

试试

$(document).ready(function()
   $("#<%=Accordion1.ClientID %>").accordion(  active: false, collapsible: true );
);

【讨论】：

这缺少结束 %>

修正了错字。谢谢@rtpHarry

【参考方案3】：

你必须设置

Accordion1.RequireOpenedPane = false;

让它们全部关闭。并且可能将 selectedIndex 设置为 -1

【参考方案4】：

我认为你的选择器是错误的：

$(document).ready(function()
   $("#<%= Accordion1.ClientID %>").accordion(  active: false, collapsible: true );
);

这必须在您的页面内部，而不是在外部 javascript 文件中，否则 代码块不会被执行。

旁注：您正在使用看起来像 jquery UI 手风琴代码的 jquery 表示法，但随后尝试将其应用于看起来像 asp.net Ajax Control Toolkit 手风琴控件的内容。如果这是你正在做的，那么它可能不会工作。但是，如果您拥有 Microsoft Ajax 库中包含的最新版本的 ACT，那么您在这里可能是正确的。我知道他们已经重新实现了所有作为 jquery 插件公开的 ACT 控件，但我没有使用过那个版本。

【参考方案5】：

附带说明：当使用手风琴（或其他 js 触发的布局）时，您将面临 FOUC（无样式内容的 Flash）的风险。我会将手风琴控件包装在一个 div 中，在您的 css 中使用 display:none ，当执行手风琴 javascript 时，您使用 JQuerys show() 使其再次可见。然后手风琴将在显示之前被加载并设置样式。