Javascript 更改移动设备上jquery非画布面板的宽度
我用它来制作一个非画布菜单。我想将面板的宽度从70%更改为100%(仅适用于移动设备)。以下是我正在使用的代码:Javascript 更改移动设备上jquery非画布面板的宽度,javascript,jquery,off-canvas-menu,Javascript,Jquery,Off Canvas Menu,我用它来制作一个非画布菜单。我想将面板的宽度从70%更改为100%(仅适用于移动设备)。以下是我正在使用的代码: jQuery(document).ready(function($){ var panelExample = $('#sidecart').scotchPanel({ containerSelector: 'body', direction: 'left', duration: 300, transition: 'ease', clickSe
jQuery(document).ready(function($){
var panelExample = $('#sidecart').scotchPanel({
containerSelector: 'body',
direction: 'left',
duration: 300,
transition: 'ease',
clickSelector: '.toggle-sidecart',
distanceX: '70%', // this sets the width
enableEscapeKey: true
});
});
我想我可以使用下面的代码,但我不知道如何使用
if (screen.width >= 768) {
// make width of panel 100%
}
有人能帮我吗
谢谢 初始化panelExample变量时,可以执行任何逻辑
jQuery(document).ready(function($){
var panelExample = (screen.width >= 768) ?
$('#sidecart').scotchPanel({
containerSelector: 'body',
direction: 'left',
duration: 300,
transition: 'ease',
clickSelector: '.toggle-sidecart',
distanceX: '100%', // this sets the width
enableEscapeKey: true
}) :
$('#sidecart').scotchPanel({
containerSelector: 'body',
direction: 'left',
duration: 300,
transition: 'ease',
clickSelector: '.toggle-sidecart',
distanceX: '70%', // this sets the width
enableEscapeKey: true
});
});
如果要设置许多不同的对象选项,上面的示例很有意义。在您的问题中,唯一改变的是distanceX,因此使变量声明更紧凑可能会更具可读性:
jQuery(document).ready(function($){
var panelWidth = (screen.width >= 768) ? "100%" : "70%",
panelExample = $('#sidecart').scotchPanel({
containerSelector: 'body',
direction: 'left',
duration: 300,
transition: 'ease',
clickSelector: '.toggle-sidecart',
distanceX: panelWidth, // this sets the width
enableEscapeKey: true
});
});