Question

我的jQuery移动项目中有一个固定标题，设置为data-tap-toggle =“true”。

<div data-role="header" data-position="fixed" data-fullscreen="true" data-id="hdr" data-visible-on-page-show="false" data-tap-toggle="true">
    <h1>My Title</h1>
</div><!-- /header -->

点击屏幕时，标题会正确切换。问题是，当我点击链接打开面板时，标题也会显示。

<a href="#mypanel" data-role="button" data-inline="true" data-icon="bars" id="panel_link">Test</a>

这是我的小组：

<div data-role="panel" id="mypanel" data-position="right" data-display="overlay" data-theme="b">
    <div class="ui-panel-inner">
        <p>Content</p>
    </div>
</div><!-- /panel -->

我试图将面板按钮列入黑名单：

$( document ).on( "pageinit", "#demo-page", function() {
        $("[data-role=header],[data-role=footer]").fixedtoolbar({ tapToggleBlacklist: "a, button, input, select, textarea" });
});

我还尝试创建自己的点击事件，将标题tapToggle选项更改为false，并仅打开面板。

$('#panel_link').on('click', function (event) {
    $("[data-role=header]").fixedtoolbar( "option", "tapToggle", false );
alert('test');
    $( "#mypanel" ).panel( "open" );
    event.stopPropagation();
});

Answer 1

试试这个：

 $('#panel_link').on('click', function (event) {
        $( "#mypanel" ).panel( "open" );
        event.stopImmediatePropagation();
    });

查看stopPropagation和stopImmediatePropagation jquery: stopPropagation vs stopImmediatePropagation

之间的区别

打开面板时如何防止jquery移动工具栏切换

1 个答案: