Question

Site.Master

中的手风琴声明

  $(function () {
                $("#userList").accordion({ active: false });
     });

我的观点：

<% foreach (var item in Model)  
   { %>  
       <h3><a href="#"><%: item.Key %></a></h3>  
       <div id="userList">  
    <% foreach (var docs in item.Value)
       { %>
           <h3><a href="#"><%: docs.Key %></a></h3>  

            <% foreach (var doc in docs.Value)
               { %>   

            <% } %>

     <%  } %>  

       </div>  
<% } %>

第一张唱片有手风琴，后续唱片没有。在检查元素时第一个记录有这个类 class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons"

不确定我没有注意到什么。我正在使用aspx engine

页面来源：

<div id="body">

    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h2>Search Result</h2> <br />
                <h2>John doe</h2>
            </hgroup>
        </div>
    </section>

    <section class="content-wrapper main-content clear-fix">
        <h3><a href="#">2222222</a></h3>  
        <div id="userList">  
            <h3><a href="#">Test1</a></h3>  
            <a href="http://somewhere">Testing1</a> <br />
        </div>  

       <h3><a href="#">123123123</a></h3>  
       <div id="userList">  
           <h3><a href="#">Testing2</a></h3>  
            <a href="http://sommewhere">Testing2</a> <br />
       </div>  

    </section>
    </div>

Answer 1

元素的ID必须是唯一的，您有多个ID为userList的元素，使用class属性将相似的元素组合在一起。我也会将手风琴体包裹在div元素中。

此外，由于您使用的是active: false，因此您还需要设置collapsible: true。

将active设置为false将折叠所有面板。这需要可折叠选项是真的。

<div id="body">

    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h2>Search Result</h2> <br />
                <h2>John doe</h2>
            </hgroup>
        </div>
    </section>

    <section class="content-wrapper main-content clear-fix">
        <h3><a href="#">2222222</a></h3>  
        <div class="userList">  
            <h3><a href="#">Test1</a></h3>
            <div>
                <a href="http://somewhere">Testing1</a> <br />
            </div>
        </div>  

        <h3><a href="#">123123123</a></h3>  
        <div class="userList">  
            <h3><a href="#">Testing2</a></h3>  
            <div>
                <a href="http://sommewhere">Testing2</a> <br />
            </div>
        </div>  

    </section>
</div>

然后

$(function () {
    $(".userList").accordion({ 
        collapsible: true, 
        active: false 
    });
});

演示：Fiddle

手风琴只适用于第一张唱片

1 个答案: