Materializecss SideNav 不以流体宽度关闭答案

【问题标题】：Materializecss SideNav not closing with fluid widthMaterializecss SideNav 不以流体宽度关闭
【发布时间】：2016-03-18 22:49:31
【问题描述】：

我正在使用 Materializecss 进行项目重建，但在使用第二个 sideNav 时遇到了一个小问题。

我有一组用于菜单（左对齐），另一组用于操作和其他加载 ajax 的页面（右对齐）。

我正在尝试根据设备大小设置 menuWidth。 EG 桌面版 40%，其他 90%。

但如果我使用百分比来设置宽度，我无法让第二个侧边栏在点击时关闭。

这是我所拥有的：

$('.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
});

我的目标是： 1) 小于桌面 (992px) 的 90% 和桌面的 40% 或 50% 作为第二个 sideNav 的宽度。 2）如果点击它后面的叠加层，它会自动关闭 3) sideNav 宽度应考虑屏幕旋转和窗口大小变化。

我正在尝试使用此功能，但无法实现上述 3 个目标。

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;
    });
});

提前致谢。

【问题讨论】：

标签： jquery materialize

【解决方案1】：

哈哈，几分钟后我就明白了：P

如果其他人遇到同样的问题，我会这样做。

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
});

【讨论】：