jQuery的移动导航栏问题

Question

我正在使用 jQuery 开发移动导航栏。我有一个小问题，jQuery 与移动导航栏完美配合，但是当我将屏幕大小调整为桌面时，桌面导航消失了。

jQuery(document).ready(function() {
  jQuery(".navtoggle").click(function() {
    jQuery(".nav-menu").slideToggle();
  });
});

移动断点 SASS

@include breakpoint(xxxs) {

  header {
    nav {

      ul {
        background: #6c49b8;
        li {
          display: block;
          border-bottom: 1px solid rgba(0,0,0,.1);
          border-left: none;
          border-right: none;
          padding: 15px;
          &:last-child {
            border-left: none;
            border-right: none;
          }
        }

      }

      .sub-menu  {
        position: relative;
        top: 0;
        padding: 0px;
        background-color: #563a92;
        z-index: 1;
      }
    }
  }


    .second-navbar {
      #open {
        margin: 20px 0px;
        display: block;
      }
    }
  }


 @include breakpoint(xxs) {

  header {
    nav {

      ul {
        background: #6c49b8;
        li {
          display: block;
          border-bottom: 1px solid rgba(0,0,0,.1);
          border-left: none;
          border-right: none;
          padding: 15px;
          &:last-child {
            border-left: none;
            border-right: none;
          }
        }

      }

      .sub-menu  {
        position: relative;
        top: 0;
        padding: 0px;
        background-color: #563a92;
        z-index: 1;
      }
    }
  }


    .second-navbar {
      #open {
        height: auto;
        margin: 20px 0px;
        display: block;
      }
    }
  }


@include breakpoint(xs) {

  header {
    nav {

      ul {
        background: #6c49b8;
        li {
          display: block;
          border-bottom: 1px solid rgba(0,0,0,.1);
          border-left: none;
          border-right: none;
          padding: 15px;
          &:last-child {
            border-left: none;
            border-right: none;
          }
        }

      }

      .sub-menu  {
        position: relative;
        top: 0;
        padding: 0px;
        background-color: #563a92;
        z-index: 1;
      }
    }
  }


    .second-navbar {
      #open {
        height: auto;
        margin: 20px 0px;
        display: block;
      }
    }
  }


@include breakpoint(sm) {

  header {
    nav {

      ul {
        background: #6c49b8;
        li {
          display: block;
          border-bottom: 1px solid rgba(0,0,0,.1);
          border-left: none;
          border-right: none;
          padding: 15px;
          &:last-child {
            border-left: none;
            border-right: none;
          }
        }

      }

      .sub-menu  {
        position: relative;
        top: 0;
        padding: 0px;
        background-color: #563a92;
        z-index: 1;
      }
    }
  }


    .second-navbar {
      #open {
        height: auto;
        margin: 20px 0px;
        display: block;
      }
    }
  }


@include breakpoint(table) {

  header {
    nav {

      ul {
        background: #6c49b8;
        li {
          display: block;
          border-bottom: 1px solid rgba(0,0,0,.1);
          border-left: none;
          border-right: none;
          padding: 15px;
          &:last-child {
            border-left: none;
            border-right: none;
          }
        }

      }

      .sub-menu  {
        position: relative;
        top: 0;
        padding: 0px;
        background-color: #563a92;
        z-index: 1;
      }
    }
  }


    .second-navbar {
      #open {
        height: auto;
        margin: 20px 0px;
        display: block;
      }
    }
  }



 @include breakpoint(md) {

  header {
    nav {

      ul {
        background: #6c49b8;
        li {
          display: block;
          border-bottom: 1px solid rgba(0,0,0,.1);
          border-left: none;
          border-right: none;
          padding: 15px;
          &:last-child {
            border-left: none;
            border-right: none;
          }
        }

      }

      .sub-menu  {
        position: relative;
        top: 0;
        padding: 0px;
        background-color: #563a92;
        z-index: 1;
      }
    }
  }


    .second-navbar {
      #open {
        height: auto;
        margin: 20px 0px;
        display: block;
      }
    }
  }

Answer 1

我会尝试在不查看您的 HTML 的情况下回答这个问题，但如果您在移动设备上的导航与桌面上的 .nav-menu 元素相同，那么我猜这是因为您正在切换导航使用 jQuery 函数从 hidden 到 visible。因此，如果您在导航隐藏后调整大小，它也会在桌面上隐藏。

您可以使用@media (min-width: 768px) 等媒体查询确保您的桌面导航始终可见，其中您的.nav-menu 显示被明确设置为阻止。 （可能设置为display:block !important;

这样，无论用户使用您的移动切换按钮做什么，浏览器都知道只要您的屏幕宽度超过 768 像素，就会显示导航。