2

jQuery Mobile アプリケーションのパネルに少し問題があります。外部をクリックしたときの Dismiss Panelの機能を除いて、すべて正常に動作します。

私の問題を説明する以下のスクリーンショットを参照してください。

ここに画像の説明を入力

私が作った赤い線に注目してください。パネルが開いているときにその行の右側をクリックすると、正常に動作します。しかし、その行の左側をクリックすると、パネルが閉じられません。

ここにhtml部分があります。

<div data-role="panel" id="sidebar-menu-monthly" data-position="left" data-display="overlay" data-dismissible="true" data-theme="a" >
    <ul>
        <li> </li>
        <li> </li>
        <li> </li>
        <li> </li>
        <li> </li>
        <li> </li>
    </ul>
</div>

も設定data-display="push"してみました。それもうまくいきませんでした。

これはスタイルシート部分です:

/* wrap on wide viewports once open */
@media (min-width:55em){
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left,
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left,
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left,
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left {
        margin-right: 17em;
    }
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right,
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right,
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
        margin-left: 17em;
    }
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push,
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal {
        width: auto;    
    }
    .ui-responsive-panel .ui-panel-dismiss-display-push {
        display: none;
    }
}

私はすでにこの答えを試しましたが、役に立ちませんでした。このフィドルもチェックしました。しかし、スタイルシートにどのような変更を加える必要があるのか​​ についてはわかりません。

にも変更しようとし@media (min-width:55em)ましたが@media (min-width:35em)、どちらも役に立ちませんでした。

誰かがスタイルシートの部分を手伝ってくれたら最高です。

PS: Panel の div が実際に見えるよりも広い幅をとっていないことをブラウザで確認済みです。だから、それは問題ではありません。

4

2 に答える 2

1

問題が見つかりました。

この css (デフォルトの jqm css - jquery.mobile-1.3.2.min.css から) が問題を引き起こしていました

.ui-panel-dismiss-open
{
    left: 17em;
}

そのため、最も右側の領域のみで却下されていました。css ファイルの css を次のようにオーバーライドする必要がありました。

.ui-panel-dismiss-open
{
    left: 13em !important;
}

そして今、正常に動作しています。

于 2013-10-30T15:43:31.280 に答える