Question

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>

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

Answer 1

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

Answer 2

我认为你的选择器错了。

尝试

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

Answer 3

你必须设置

Accordion1.RequireOpenedPane = false;

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

Answer 4

我认为你的选择器错了：

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

这必须进入你的页面，而不是外部的javascript文件或＆lt;％=％＆gt;代码块不会被执行。

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

Answer 5

旁注：当使用手风琴（或其他js触发的布局）时，您将冒着FOUC（Flash Of Unstyled Content）的风险。我将把手风琴控件包装在div中，在你的css中使用display：none，并且当执行手风琴javascript时，你使用JQuerys show（）使它再次可见。然后手风琴将在展示之前加载并设置样式。

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

5 个答案: