0

手风琴宣言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>
4

1 回答 1

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 
    });
});

演示：小提琴

于 2013-09-19T02:45:12.623 回答