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

阻力最小的路径是不要通过隐藏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();
});

另外，请注意我可以创建一个更复杂的显示/隐藏函数来保存collapser div的当前状态...使用show（），hide（），slideToggle（），fadeToggle（）等

Answer 3

不幸的是，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 4

这是一个更有活力的＆amp;优雅的解决方案，适用于多个列表。

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

jquery移动可折叠内容帮助

4 个答案: