使用单独的按钮触发JQUERY Mobile中的可折叠

时间:2019-03-03 22:40:15

标签: javascript jquery html jquery-mobile

我在JQUERY Mobile中有一个可折叠的设备,我正在阅读它作为更多内容。当可折叠式对象展开时,有一个固定按钮,屏幕底部显示“ close”(关闭),因此您不必滚动到顶部即可关闭可折叠式对象。

我要执行的操作是使用屏幕底部的固定关闭按钮触发可折叠设备关闭。我已经尝试过绑定方法,但是我的经验不足阻碍了我的理解。

这是我正在使用的代码。

<div id="showbutton" data-role="collapsible" data-theme="b" data-transition="turn" data-content-theme="d" class="ui-shadow ui-btn-inline">
    <h2>Read more</h2>
    <h2 id="content">Lots and lots of content here</h2>

        <footer align="center" id="closefooter" data-role="footer" data-position="fixed" data-theme="b">
            <script>
                $(function() {
                    $("#closebutton").click(function() {
                        console.log("ok");
                    $( "#showbutton" ).trigger( "closebutton" );
                    });
                 });
            </script> 
        <a id="closebutton">close</a>
    </footer>

</div>

2 个答案:

答案 0 :(得分:2)

工作示例:http://jsfiddle.net/nmxav27t/

$(document).on("click", "#closebutton", function(event) {
    $("#showbutton").collapsible("collapse");
});

您需要在要用于关闭的按钮上绑定一次点击(或点击事件),然后在 showbutton id上触发合拢。

答案 1 :(得分:0)

您可以按如下所述使用crash()方法:https://api.jquerymobile.com/collapsible/

$( ".selector" ).collapsible( "collapse" );