Question

无论如何使用jquery mobile在列表视图中呈现带有列表项的手风琴？

当我向其添加列表视图时，以下代码不会呈现“第2部分”

<div data-role="collapsible-set">
        <div data-role="collapsible" data-collapsed="false">
            <h3>Section 1</h3>
            <p>I'm the collapsible content in a set so this feels like an accordion. I'm open by default because I have the <code>data-collapsed="false"</code> attribute.</p>
        </div>
        <div data-role="collapsible" data-collapsed="false">

    <ul data-role="listview" id="myAppsSectionGridTable">
    <li><a href="pa.aspx">
        <img src="images/gf.png" alt="" class="ui-li-icon">IT Change Controls<span class="ui-li-count">
            4</span> 
            </a>
            </li>
              <li><a href="pa.aspx">
        <img src="images/gf.png" alt="" class="ui-li-icon">Expense<span class="ui-li-count">
            8</span> 
            </a>
            </li>
              <li><a href="pa.aspx">
        <img src="images/gf.png" alt="" class="ui-li-icon">Seminar<span class="ui-li-count">
            6</span> 
            </a>
            </li>
              <li><a href="PendingApprovals.aspx">
        <img src="images/gf.png" alt="" class="ui-li-icon">Indirect PR<span class="ui-li-count">
            4</span> 
            </a>
            </li>
              <li><a href="pa.aspx">
        <img src="images/gf.png" alt="" class="ui-li-icon">PTO<span class="ui-li-count">
            2</span> 
            </a>
            </li>
</ul>

        </div>

Answer 1

认为你的意思是这样的。

jsFiddle DEMO

Answer 2

这是一款非常易于使用并且完全可以使用的jquery手风琴，我已在几个网站上使用它。

http://docs.jquery.com/UI/Accordion

与Listview项目Jquery Mobile一起使用

2 个答案: