javascript - 为什么我的点击功能在特定媒体查询中不起作用

问题描述

我只是在学习前端开发。我在制作覆盖导航栏菜单而不是下拉菜单时遇到问题。当它到达超小窗口（以下 575.98 像素）时，导航栏菜单变为覆盖。当窗口高于该窗口时，导航栏为下拉菜单。

我使用 jquery$(window).width()来检查，当我单击汉堡包图标时，如果我的窗口超小尺寸，则覆盖层会出来。但在我的代码中并没有发生，覆盖层出来了，但它突然又上升了

有人可以帮助我吗？我将不胜感激。提前致谢！

// initialize object
var overlayContent = $('#navbarSupportedContent');
var overlayBtn = $('.navbar-toggler');
var closeOverlayBtn = $('.closebtn');


	if($(window).width() < 575.98) {
		overlayBtn.on('click',function(){
			overlayContent.css('height', '100%');
			overlayContent.removeAttr('class');

			// remove attribute that related with collapse 
			$(this).removeAttr('data-toggle data-target aria-controls aria-expanded aria-label');
		});

		closeOverlayBtn.on('click',function(){
			overlayContent.css('height', '0');

			// add back attribute
			overlayBtn.attr('data-toggle', 'collapse');
			overlayBtn.attr('data-target', '#navbarSupportedContent');
			overlayBtn.attr('aria-controls', 'navbarSupportedContent');
			overlayBtn.attr('aria-expanded', 'false');
			overlayBtn.attr('aria-label', 'Toggle navigation');

			// add back class
			overlayContent.attr('class', 'collapse navbar-collapse');
		});
	}
	else {
		// don't do the click when windows width over 575.98 px
		overlayBtn.off("click");
		closeOverlayBtn.off("click");
	};

@media (max-width: 575.98px) {
  #navbarSupportedContent {

	  height: 0;
	  width: 100%;
	  position: fixed;
	  z-index: 1;
	  top: 0;
	  left: 0;
	  background-color: rgb(0,0,0);
	  background-color: rgba(0,0,0, 0.9);
	  overflow-x: hidden;
	}

	#overlay-content {

	  position: relative;
	  top: 25%;
	  width: 100%;
	  text-align: center;
	  margin-top: 30px;
	}

	#navbarSupportedContent a {

	  padding: 8px;   
	  text-decoration: none;
	  font-size: 36px;
	  color: #818181;
	  display: block;
	}
}

<html lang="en">
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
   <nav class="navbar navbar-expand-lg navbar-light bg-white">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <a href="javascript:void(0)" class="closebtn">&times;</a>
      <ul class="navbar-nav ml-auto" id="overlay-content">
        <li class="nav-item pr-5">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item pr-5">
          <a class="nav-link" href="#">Products</a>
        </li>
        <li class="nav-item pr-5">
          <a class="nav-link" href="#">Contacts</a>
        </li>
      </ul>
    </div>
  </nav>
 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</body>
</html>

标签： javascriptjqueryhtmlcss

javascript - 为什么我的点击功能在特定媒体查询中不起作用

问题描述

解决方案

推荐阅读