Question

如何在图标上设置可折叠设置？这是我的图标代码。

<div id="custom-border-radius">
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-notext ui-corner-all">No text</a>
</div>

点击'+'图标我需要显示和隐藏列表（发送短信和发送邮件），代码如下，

<input type="submit" id="sms" data-inline="true" value="Send SMS">
<input type="submit" id="mail" data-inline="true" value="Send Mail">

我如何用可折叠的概念做到这一点。还有其他方法，请提出任何建议

Answer 1

<div data-role="collapsible" id='collapsible1'>
    <h4>Heading</h4>
    <form>
    <input type="button" data-inline="true" id='btn1' value="Input">
    <div class="ui-input-btn ui-btn ui-btn-inline">
        Enhanced
        <input type="button" data-enhanced="true" id='btn2' value="Enhanced">
    </div>
</form>
</div>
<script>
$('#btn1').click(function(){
    alert("Btn 1 clicked");
    document.getElementById('collapsible1').style.display = 'none';
});
$('#btn2').click(function(){
    alert("Btn 2 clicked");
    document.getElementById('collapsible1').style.display = 'none';
});
</script>

已编辑以将可消除的行为添加到可折叠集 JFiddle在这里(Demo)

在JQuery mobile中使用Collapsible Set on icon的问题？

1 个答案: