jquery - 折叠列表中的部分项目

Question

我想使用 JQuery Mobile 创建一个网络广播电台列表。列表的某些部分（如电台名称和流派标签）应该是永久可见的，而其他部分（如 url 或评论）应该折叠起来，并且只有在需要时才会折叠起来。

为了澄清我的要求，我举了一个例子：

<div data-role="content">
    <ul data-role="listview">
        <li>
            <h2>Item 1</h2>
            <div class="tag-list">
                <span class="tag">Tag A</span>
            </div>
            <div class="comment-list">
                <div class="comment">
                    <p>This is a comment</p>
                </div>
                <div class="comment">
                    <p>Another comment</p>
                </div>
            </div>
        </li>
    </ul>
</div>

（更好地在这里查看：http: //jsfiddle.net/uAvpS/1/）

只有comment-list并且comment应该折叠，其余的应该始终可见。

如何做到这一点？在我看来，这与可折叠列表不同

Answer 1

给每个liadata-role="collapsible"并在其标题内，添加您的自定义span保存标签。

演示

<li data-role="collapsible">
  <h2>Item 1<span class="tag-list"><span class="tag">tag 1</span></span></h2>
  <div class="comment">
    <p>This is a comment</p>
  </div>
  <div class="comment">
    <p>Another comment</p>
  </div>
</li>