javascript - 如何使用phonegap为android获取可折叠的listview

Question

我有 3 个名为的列表视图

活动-今天，活动-本周，活动-本月。

我想使用可折叠列表视图格式来显示列表。我已经看到了使用 jquery mobile 的可折叠列表视图的示例，但我想使用 java 脚本、html 和 css 来实现这一点。谁能帮我？

我想要这样的东西，如图所示。希望我的问题很清楚。

谢谢你。

Answer 1

我已经为你设置了这个jsfiddle，点击标题就会出现内容：

jsfiddle

基本上，通过标题的 onclick 事件，您可以决定是显示还是隐藏内容，然后更改标题以更改 +/- 符号。当然，这个例子只是向你展示了如何实现逻辑，但并没有应用好看的样式。

的HTML：

<div class='collapsibleCont'>
<h3 id='collapsible1' class='collapsibleTitle' onclick="handleCollapsible('collapsible1')">+ title</h3>
<p  style="display:none" class='collapsibleContent'>helloooooooooooo</p>
</div>

handleCollapsible(id) 函数：

function handleCollapsible(id){
var clickedTitle = document.getElementById(id);
var contentC = clickedTitle.parentNode.childNodes[1];
if(contentC.style.display=='none'){
        contentC.style.display = 'block';
        var mysplittedtitle = clickedTitle.innerHTML.split(" ");
        var newTitle = "- "+mysplittedtitle[1];
        clickedTitle.innerHTML =newTitle;


}else{
        contentC.style.display = 'none';
        var mysplittedtitle = clickedTitle.innerHTML.split(" ");
        var newTitle = "+ "+mysplittedtitle[1];
        clickedTitle.innerHTML=newTitle;


}
        }

用 jquery 做这件事会容易得多。用 jquery-mobile 做会容易得多。这段代码的坏处是需要将onclick事件添加到每个可折叠项，包括 id，这是可以避免的，并且使用 jquery 更简单。

Answer 2

试试这个方法：

<div data-role="page" id="home"> 

    <div data-role="header"> 
        <h1>jQuery Mobile</h1> 
    </div> 

    <div data-role="content">

        <div data-role="collapsible-set">

    <div data-role="collapsible" data-collapsed="false">
    <h3>Section 1</h3>

        <ul data-role="listview" data-inset="true">
                <li data-filtertext="11:first:one"><a href="#">one</a></li>
<li data-filtertext="22:second:two"><a href="#">two</a></li>
<li data-filtertext="33:third:three"><a href="#">three</a></li>
<li data-filtertext="44:fourth:four"><a href="#">four</a></li>            
            </ul>

    </div>

    <div data-role="collapsible">
    <h3>Section 2</h3>
    <p>I'm the collapsible set content for section B.</p>
    </div>

</div>


    </div>
</div>
​

完整源http://jsfiddle.net/dhavaln/UCDfU/

Answer 3

我想你想使用嵌套列表视图.....

<h3>Nested List Example</h3>
<ul data-role="listview">
 <li>Restaurants
  <ul>
   <li>French
     <ul>
           <li>Le Central</li>
           <li>Bistro Vandome</li>
           <li>Antoine's</li>
   </ul>
  </li>
  <li>Cajun and Creole
    <ul>
         <li>Bayou Bob's</li>
         <li>Pappadeaux</li>
         <li>Lucile's</li>
   </ul>
  </li>
  <li>American
    <ul>
         <li>Dixon's</li>
         <li>Vesta Dipping Grill</li>
         <li>Steuben's</li>
    </ul>
  </li>
</ul>
</li>
</ul>