时间戳

首页 > 解决方案 > 点击手机屏幕后，导航栏在大屏幕上消失

javascript - 点击手机屏幕后，导航栏在大屏幕上消失

问题描述

我有一个轮播和一个导航栏。当它显示在移动设备上时，导航栏会消失，汉堡图标会出现。当您单击汉堡图标时，导航栏将切换。问题是：如果我不点击汉堡图标，当我缩小或拉伸屏幕时，导航栏和汉堡图标消失/出现在右边，但如果在移动屏幕上我点击汉堡图标并关闭它，之后我拉伸屏幕，导航栏将在大屏幕上永远消失。我是新手，我真的不知道为什么。请帮我解决一下这个。非常感谢！

var src1 = "./images/icon-close.svg";
var src2 = "./images/icon-close.svg";


$('#mobile-nav-icon').click(
  function() {

    $('.navbar-list').slideToggle(200);
    $('.navbar-list').toggleClass("background");
    $('.navbar-list').toggleClass("selected");

    var src = $('#mobile-nav-icon').attr('src');
    if (src == src1) {
      $('#mobile-nav-icon').attr('src', src2);
    } else {
      $('#mobile-nav-icon').attr('src', src1);
    }
  }
);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Spartan', sans-serif;
  font-size: 62.5%;
}

.background {
  background-color: white;
}

.section1 {
  position: relative;
}

.nopadding {
  padding: 0 !important;
  margin: 0 !important;
}

.selected {
  box-shadow: 0 0 0 99999px rgba(0, 0, 0, .5);
}


/* navbar */

.navbar-list {
  list-style: none;
  width: 380%;
  height: 100px;
  display: block;
}

.navigation {
  position: absolute;
  top: 7%;
  left: 8%;
}

.navbar-brand {
  float: left;
  margin: 0 40px 0 3%;
  color: white;
  font-weight: 600;
  font-size: 2rem;
}

.navbar-item {
  display: inline-block;
  margin: 1.6% 3% 3%;
}

.navbar-link {
  color: white;
  font-size: 1.2rem;
}

#mobile-nav-icon {
  display: none;
  position: absolute;
  margin-top: 6%;
  cursor: pointer;
}

.navbar-link:hover {
  color: white;
  text-decoration: none;
}


/* reponsive */

@media (max-width:540px) {
  #mobile-nav-icon {
    margin-top: 6%;
    display: block;
  }
  .navbar-list {
    display: none;
    position: absolute;
    font-weight: 600;
    width: 300%;
    top: -30px;
    left: -30px;
    height: 100px;
  }
  .navbar-brand {
    margin-left: 150px;
  }
  .navbar-link {
    color: black;
  }
  .navbar-item {
    margin-top: 6%;
  }
  .navbar-item:first-child {
    margin-left: 10%;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="row">
  <div class="col-lg-7 nopadding section1">

    <!-- carosel -->
    <div class="carousel slide" data-interval="false">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" class="d-block w-100" alt="image-hero-1">
        </div>

      </div>
    </div>

    <!-- navbar -->
    <nav class="navigation">
      <a class="navbar-brand" href="#">room</a>
      <div class="navbar-list-button">
        <ul class="navbar-list">
          <li class="navbar-item">
            <a class="navbar-link" href="#">home</a>
          </li>
          <li class="navbar-item">
            <a class="navbar-link" href="#">shop</a>
          </li>
          <li class="navbar-item">
            <a class="navbar-link" href="#">about</a>
          </li>
          <li class="navbar-item">
            <a class="navbar-link" href="#">contact</a>
          </li>

        </ul>
        <img id="mobile-nav-icon" src="./images/icon-hamburger.svg" alt="icon-hamburger">

      </div>

    </nav>
 

  </div>

标签： javascriptjquerycssnavigationtoggle

解决方案

我不会使用 .slideToggle() 来显示或隐藏菜单，而是使用 toggleClass('showing')

然后在媒体查询中定义 .showing 类，如下所示：

@media (max-width:540px) {
    .navbar-list {
        display: none;
    }
    .navbar-list.showing {
        display: block;
    }
}

使用 .slideToggle() 打开然后关闭菜单，意味着当你再次扩大屏幕时，它仍然会关闭。

但是通过使用 .toggleClass('showing') 你正在打开菜单，通过添加 CSS 规则，这些规则只有在屏幕薄于 540 像素时才会生效。当你关闭它时，这个类将被删除，所以 display: none 来自你更一般的媒体查询将重新发挥作用。然后当您扩大屏幕时，不会应用任何媒体查询，因此您将返回显示：阻止（菜单打开）。

推荐阅读