Jquery移动可折叠内容帮助

Question

我一直在考虑使用JQM可折叠内容，虽然我已经了解如何使用它们，但我看不到与列表元素一起使用的方法。我检查了文档，也花了时间在谷歌上搜索，但没有成功。如果可能的话，如果有人能告诉我怎么做，我会很感激的。由于

<ul data-role="listview" data-inset="true">
  <li><a href="#newintake">New Intake</a></li>
  <li><a href="#boxretrieval">Box Retrieval</a></li>
  <li><a href="#boxreturn">Box Return</a></li>
  <li><a href="#boxdestruction">Box Destruction</a></li>
  <li><a href="#permboxdestruction">Permanent Box Destruction</a></li>
</ul>

Answer 1

像这样:

• http://jsfiddle.net/deeu8/4/

HTML:

<div data-role="page" id="home"> 
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Nagivsation</li> 
            <li><a href="#page2">Page 2</a></li> 
        </ul> 
        <div data-role="collapsible" data-collapsed="true">
            <h3>Numeric Section</h3>
            <p>
                <ul data-role="listview">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </p>
        </div>
    </div>
</div>
<div data-role="page" id="page2"> 
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Nagivsation</li> 
            <li><a href="#home">Home Page</a></li> 
        </ul> 
        <div data-role="collapsible" data-collapsed="true">
            <h3>Alpha Section</h3>
            <p>
                <ul data-role="listview">
                    <li>A</li>
                    <li>B</li>
                    <li>C</li>
                </ul>
            </p>
        </div>
    </div>
</div>

Answer 2

我也有同样的问题，我现在最好的方法是:

<ul data-role="listview" data-inset="true">
    <li>
       <a href="#">
          <p>
             <div data-role="collapsible">
                <h3>Title</h3>
                <p>collapsible content</p>
             </div>
          </p>
       </a>
    </li>
</ul>

它不是那么好看，但是可以通过一些css调整来达到效果。

Answer 3

阻力最小的方法是不通过隐藏LI来折叠UL，而是将UL放在div中并折叠它。

:

<a href="#" class="someButton">Click to toggle</a>
<div class="collapser">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>

然后JS:

$('.someButton').click( function() {
    $('.collapser').toggle();
});

另外，请注意，我本可以创建一个更复杂的显示/隐藏函数来保存折叠器div的当前状态…使用show()， hide()， slideToggle()， fadeToggle()等

Answer 4

不幸的是，jQM可折叠内容不适用于列表。我希望它能在不久的将来到来。

这是我做这件事的方法。可以通过添加一个图标来改进。 html:

<ul data-role="listview" data-inset="true">
    <li id="cars" data-role="list-divider" role="heading">French Cars</li>
    <li class="car"><a href="">Bugatti</a></li>
    <li class="car"><a href="">Citroen</a></li>
    <li class="car"><a href="">Ligier</a></li>
    <li class="car"><a href="">Peugeot</a></li>
    <li class="car"><a href="">Renault</a></li>
    <li class="car"><a href="">Talbot</a></li>
</ul>

javascript:

$("#cars").click( function() {
  $(".car").toggle();
  $("#cars").toggleClass("ui-corner-bottom");
});

现场观看:http://jsfiddle.net/gCkZ9/3

Answer 5

这是一个更加动态的&优雅的解决方案，适用于多个列表。

<ul data-role="listview" data-inset="true">
    <li class="cars" data-role="list-divider" role="heading">French Cars</li>
    <li><a href="">Bugatti</a></li>
    <li><a href="">Citroen</a></li>
    <li><a href="">Ligier</a></li>
    <li><a href="">Peugeot</a></li>
    <li><a href="">Renault</a></li>
    <li><a href="">Talbot</a></li>
</ul>

$('#cars').click(function(){
    $(this).siblings().toggle();
    $(this).toggleClass("ui-corner-bottom");
});