Question

我正在使用Materialisecss进行项目重建，并且在使用第二个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 width应考虑屏幕旋转和窗口大小的变化。

我正在尝试使用此功能，但无法让它为上述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;
    });
});

提前致谢。

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

Materializecss SideNav没有关闭流体宽度

1 个答案: