Question

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

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

移动Breackpoints 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;

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

移动导航栏jQuery问题

1 个答案: