使用jquery mobile展開和摺疊鏈接點擊鏈接使用jquery mobile

Question

我想使用jquery mobile單擊「more」和「less」鏈接時展開和摺疊列表內容。可能嗎？請幫助。

感謝

Answer 1

嗨Refre酒店這個鏈接http://jsfiddle.net/KqFRu/7/

<div> 
    <fieldset class="majorpoints"> 
    <legend class="majorpointslegend">Expand</legend> 
    <div class="hiders" style="display:none" > 
     <ul> 
      <li>cccc</li> 
      <li></li> 
     </ul> 
    </div> 
</div><div> 
    <fieldset class="majorpoints"> 
    <legend class="majorpointslegend">Expand</legend> 
    <div class="hiders" style="display:none" > 
     <ul> 
      <li>cccc</li> 
      <li></li> 
     </ul> 
    </div> 
</div><div> 
    <fieldset class="majorpoints"> 
    <legend class="majorpointslegend">Expand</legend> 
    <div class="hiders" style="display:none" > 
     <ul> 
      <li>cccc</li> 
      <li></li> 
     </ul> 
    </div> 
</div><div> 
    <fieldset class="majorpoints"> 
    <legend class="majorpointslegend">Expand</legend> 
    <div class="hiders" style="display:none" > 
     <ul> 
      <li>cccc</li> 
      <li></li> 
     </ul> 
    </div> 
</div> 

和JS

$('.majorpoints').click(function(){ 
    $(this).find('.hiders').toggle(); 
}); 

Answer 2

最好的解決方案是不使用JavaScript的。看看這裏：https://jsfiddle.net/zx3du1p6/1/

input[type="checkbox"] { 
    display: none; 

    &:checked ~ .list-item { 
     display: block; 
    } 
} 

.list-item { 
    display: none; 
} 

這使用jQuery的：https://jsfiddle.net/zx3du1p6/

$('button').click(function() { 
    $('li').toggleClass('open') 
}) 

如果你絕對必須使用jQuery Mobile的，你可以使用可壓縮集：https://jsfiddle.net/zx3du1p6/2/

<div data-role="collapsibleset" data-theme="a" data-content-theme="a"> 
    <div data-role="collapsible"> 
        <h3>Load more</h3> 
    <p>List goes here</p> 
    </div> 
</div>