更改手機上jquery關閉畫布面板的寬度

Question

使用scotch panels創建畫布菜單。我只想在手機上將面板的寬度從70％改爲100％。下面是我使用的代碼：

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% 
} 

如何誰能幫助我嗎？

謝謝！

Answer 1

當你初始化你的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 
    }); 

});