Javascript 为什么幻灯片面板打开时标题文本隐藏？

我有面板在顶部标题。单击图像（标题左侧）后，显示面板。实际上，我的问题是，在我的示例中，每当我的面板打开时，我的标题都是hide（“Test”）

data display=“push”

它隐藏了我的标题（“测试”）。但是当我尝试

data display=“overlay”

时，它并没有隐藏标题文本，而是隐藏了我的图像。：（为什么我不能同时显示这两个内容

---

我更改了

data display=“overlay”

，并应用以下代码相应地计算面板的高度

$(function () {   
    $('#panelOpenImge').click(function(){
        $( "#mypanel" ).panel( "open"  );
    });
    var header = $('[data-role=header]').outerHeight();
    var panel = $('#mypanel').height();
    var panelheight = panel - header;
    $('.ui-panel').css({
        'top': header,
        'min-height': panelheight
    });
});

这一切都归功于此

更新的小提琴

检查此

$(function () {   
    $('#panelOpenImge').click(function(){

        $( "#mypanel" ).panel( "open"  );

    });
    var panel = $('#mypanel').height();
    var panelheight = panel - header;
    $('.ui-panel').css({
       'min-height': panelheight
    });
});

我添加了一些css代码

@media ( min-width: 200px) {

    /* wrap on wide viewports once open */

    .ui-panel-page-content-open.ui-panel-page-content-position-left {
        margin-right: 17em;
    }
    .ui-panel-page-content-open.ui-panel-page-content-position-right {
        margin-left: 17em;
    }
    .ui-panel-page-content-open {
        width: auto;
    }

    .ui-panel-page-content-open.ui-panel-page-content-position-left.ui-panel-page-content-display-push {
        margin-right: 17em;
    }
    .ui-panel-page-content-open.ui-panel-page-content-position-right.ui-panel-page-content-display-push {
        margin-left: 17em;
    }
    .ui-panel-page-content-open.ui-panel-page-content-display-push {
        width: auto;
    }

}

请查收

---

这是错误的答案。我需要这样的答案。请删除你的答案，以便其他人回答该问题。你没有将我编写的代码部分添加到你的小提琴中。你至少应该检查我的小提琴。无论如何，我很高兴你得到了答案。正如我所说，我需要在jQuery mobile上进行响应式工作。请稍等。首先请检查在本演示中选中此演示“+”当面板打开且面板关闭时，保持屏幕显示closed@mr.corococo回答正确，所以我需要为所有屏幕添加css。您可以再检查一件它适用于所有宽度超过200的屏幕的事情吗？是的。css将在宽度超过200px的屏幕上工作。但是，您可以将该值更改为您需要的任何值。我们可以添加吗和条件像200到300宽度一样？为什么要删除以前的堆栈溢出帐户并创建新的？

@media ( min-width: 200px) {

    /* wrap on wide viewports once open */

    .ui-panel-page-content-open.ui-panel-page-content-position-left {
        margin-right: 17em;
    }
    .ui-panel-page-content-open.ui-panel-page-content-position-right {
        margin-left: 17em;
    }
    .ui-panel-page-content-open {
        width: auto;
    }

    .ui-panel-page-content-open.ui-panel-page-content-position-left.ui-panel-page-content-display-push {
        margin-right: 17em;
    }
    .ui-panel-page-content-open.ui-panel-page-content-position-right.ui-panel-page-content-display-push {
        margin-left: 17em;
    }
    .ui-panel-page-content-open.ui-panel-page-content-display-push {
        width: auto;
    }

}