JQuery Mobile-在较大屏幕上并排显示面板

我正在尝试制作一个分为两个级别的幻灯片菜单。 单击第一个幻灯片中的项目时，将打开第二个幻灯片。 在较大的屏幕上，第二个slidemenu与slidemenu相邻，在较小的屏幕上，它覆盖了所有内容

 http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/index.html

文件中说明如下：

使用标记控制面板时，一次只能打开一个面板。当面板已打开时，单击链接打开面板将自动关闭第一个面板。这样做是为了使仅标记配置保持简单

也就是说，可以通过编程一次打开多个面板：

 $( "#idofpanel" )
    .panel( "open" , optionsHash )
      .then( function( options ) {
        $( "#idofpanel2" ).panel( "open" , options );
     });

但他们没有说应该有什么选择

我当前的html是：

<div data-role="panel" id="gridItemDetailPanel" data-position="left" data-swipe-close="false" data-dismissible="false" data-display="overlay">
        <a  data-role="button" id="testOpen2" >test</a>
</div>
<div data-role="panel" id="gridItemDetailPanel2" data-position="left" data-display="overlay">
TEST2
</div>

当我点击#testOpen2时，第一个幻灯片单元消失，第二个出现。 我该怎么做

$("#testOpen2").click(function(){
   $( "#gridItemDetailPanel2" ).panel( "open");
});