Question

我正在使用Bootstrap模板SB Admin（https://startbootstrap.com/templates/sb-admin/），该模板具有单击时使用菜单按钮的隐藏/显示侧面导航。我想在全屏上保留标准功能，除非特别单击以关闭它，否则默认情况下将显示侧面导航。

在较小的屏幕/移动设备上，默认行为是隐藏侧面导航，除非单击以打开，这很好，但是我希望在单击导航div之外时自动关闭导航-但只能在移动设备上使用。

我不知道如何根据断点来触发不同的行为-任何想法都将不胜感激。谢谢。

Answer 1

您正在使用dist文件还是src文件？

如果您使用的是dist文件，则可以将其简单地添加到CSS中，而无需额外的jquery或js。

@media (max-width: 992px) {
   .sb-sidenav-toggled #sidebarToggle::before {
     content: '';
     position: fixed;
     display: block;
     z-index: 0;
     top: 0;
     left: 225px;
     bottom: 0;
     right: 0;
   }
}

这是当侧面导航设置为打开时，在body标签中添加了一个类。 .sb-sidenav-toggled。

我们还使用css媒体查询将其包装起来，以确保我们仅在平板电脑/手机上使用（以下为991px）。

然后，在#sidebarToggle按钮上（使用父父类.sb-sidenav-toggled打开时）将创建一个固定的伪::before元素（透明），该元素覆盖您想要的主体区域可点击以关闭侧面导航。

魔术是，因为此伪元素的父级是侧边栏导航按钮，这意味着单击它时会触发标准的关闭侧导航事件。当它关闭时，.sb-sidenav-toggled主体类将被删除，进而删除伪元素。

如果您正在使用scss文件夹中的src个文件，则可以使用下面的sass ...

@include media-breakpoint-down(md) {
  #sidebarToggle {
    .sb-sidenav-toggled & {
      &:before {
        content: '';
        position: fixed;
        z-index: 0;
        display: block;
        top: 0;
        left: 225px;
        bottom: 0;
        right: 0;
      }
    }
  }
}

基于Bootstrap断点视图隐藏导航菜单

1 个答案: