实例：
<!-- Panels overlay--> <div class="panel-overlay"></div> <!-- 左侧面板 --> <div class="panel panel-left panel-reveal"> <div class="content-block"> <p><a href="#" class="close-panel">关闭面板</a></p> </div> </div> <!-- 右侧面板 --> <div class="panel panel-right panel-cover"> <div class="content-block"> <p><a href="#" class="close-panel" data-panel="right">关闭面板</a></p> </div> </div>
左侧面板：panel-left
右侧面板：panel-right
推出面板：panel-reveal
覆盖：panel-cover
关闭面板：close-panel
方法：myApp.openPanel('left[right]')
事件:
var myApp = new Framework7();
var $$ = Dom7;
$$('.panel-left').on('opened', function () { myApp.alert('Left panel opened!'); });
滑动推出面板需要配置初始化参数，但只能设置一边：swipePanel: 'left[right]'
判断侧边栏是否打开：
-
如果你有带Cover效果的左侧栏打开着，body会有“with-panel-left-cover”类
<body class="with-panel-left-cover"> -
如果你有带Reveal效果的左侧栏打开着, body 会有“with-panel-left-reveal”类
<body class="with-panel-left-reveal"> -
如果你有带Cover效果的右侧栏打开着，body会有"with-panel-right-cover" 类
<body class="with-panel-right-cover"> -
如果你有带Reveal效果的右侧栏打开着, body 会有"with-panel-right-reveal" 类
<body class="with-panel-right-reveal">
判断if ($$('body').hasClass('with-panel-left-cover')) { console.log('Left Panel is opened') }