Materializecss SideNav genişliği ile kapanmıyorKaplama

Question

Bir projenin yeniden oluşturulması ve ikinci bir sideNav kullanılarak küçük bir sorunla karşılaşılması için Materializecss kullanıyorum.

Menü için bir tane (sola hizalanmış) ve ajax (sağa hizalanmış) ile yüklenen eylemler ve diğer sayfalar için kullanılacak ikinci bir ayarım var.

Menü boyutunu aygıtın boyutuna göre ayarlamaya çalışıyorum. EG Masaüstü% 40, başka% 90.

Ancak, genişliği ayarlamak için bir yüzde kullanırsam, ikinci kenar çubuğunu tıklamayı kapatamıyorum.

$('.button-collapse-right').sideNav({ 
    menuWidth: '40%', // Default is 240 
    edge: 'right', // Choose the horizontal origin 
    closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor 
}); 

Amacım olduğunu: 1) ikinci sideNav için genişlik olarak masaüstü için masaüstü (992px) ve% 40 ya da% 50 daha küçük için% 90 olması Burada

ben ne var . 2) Kapak arkasına tıklandığında otomatik olarak kapanacak şekilde 3) sideNav genişliği ekran dönüşlerini ve pencere boyutu değişikliklerini hesaba katmalıdır.

Bu işlevin etrafında oynamaya çalışıyordum, ancak yukarıdaki 3 hedef için işe yaramaya çalışamıyordum.

var screenWidth = $(window).resize(function() { 
    $("body").each(function(i,item){ 
     item = $(item); 
     size = item.width() > '991' ? Math.floor(item.width() * 0.5) : Math.floor(item.width() * 0.9); 
     console.log(size); 
     return size; 
    }); 
}); 

Şimdiden teşekkürler.

Answer 1

Haha ve sadece birkaç dakika sonra ben onu anlamaya: P

Burada herkesten aynı sorunu vurursa ben de bunu yaptık.

getPanelWidth = function() { 
    var screenWidth = $(window).width(); 
    panelSize = screenWidth > '991' ? Math.floor(screenWidth * 0.5) : Math.floor(screenWidth * 0.9); 
    console.log(panelSize); 
    return panelSize; 
}; 

$('.button-collapse-right').sideNav({ 
    menuWidth: getPanelWidth(), // Default is 240 
    edge: 'right', // Choose the horizontal origin 
    closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor 
});