使用jquery mobile展开和折叠链接点击链接使用jquery mobile

问题描述：

我想使用jquery mobile单击“more”和“less”链接时展开和折叠列表内容。可能吗？请帮助。使用jquery mobile展开和折叠链接点击链接使用jquery mobile

感谢

你有没有尝试一下吗？你能分享你的代码吗？ –

嗨马丁，我还没有开始编码。只是有一个要求。基本上，当我点击“更多”链接时，列表应该展开，反之亦然。 –

在询问之前，您应该总是先尝试编码。但结帐我的答案。你只能用CSS来做到这一点。最好的做法是尽可能避免使用JavaScript。 –

答

嗨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(); 
});

谢谢你的帮助gayathri .. –

如果它工作正常，你可以这样回答，以便它会对别人有所帮助 –

答

最好的解决方案是不使用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>

我想要这个使用jquery手机:( –

添加jquery移动到答案 –

使用jquery mobile展开和折叠链接点击链接使用jquery mobile

相关推荐