javascript - 单击汉堡按钮时覆盖并通过同一按钮禁用它-6ren

javascript - 单击汉堡按钮时覆盖并通过同一按钮禁用它

转载作者：行者123 更新时间：2023-11-29 16:02:12

我在如何使叠加层按我想要的方式工作方面遇到了问题。问题是当我点击汉堡包按钮时，叠加层覆盖了 Bootstrap 导航栏甚至滑动菜单。我想要的是叠加层只影响 HTML 主体，不包括导航栏和侧边栏。此外，我想通过同一个按钮禁用覆盖，但我也不知道如何管理它。任何帮助。代码如下。

function on() {
    document.getElementById("overlay").style.display = "block";
}

function off() {
    document.getElementById("overlay").style.display = "none";
}

//mobile menu slide from the left
$('[data-toggle="slide-collapse"]').on('click', function() {
    $navMenuCont = $($(this).data('target'));
    $navMenuCont.animate({'width':'toggle'}, 350);
});

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
}

<body>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="pull-left navbar-toggle" data-toggle="slide-collapse" data-target="#myNavbar" onclick="on()" onclick="off()">
         <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#myPage">HOME</a></li>
        <li><a href="#band">BAND</a></li>
        <li><a href="#tour">TOUR</a></li>
        <li><a href="#contact">CONTACT</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
          <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Merchandise</a></li>
            <li><a href="#">Extras</a></li>
            <li><a href="#">Media</a></li> 
          </ul>
        </li>
        <li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#myPage">HOME</a></li>
        <li><a href="#band">BAND</a></li>
        <li><a href="#tour">TOUR</a></li>
        <li><a href="#contact">CONTACT</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
          <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Merchandise</a></li>
            <li><a href="#">Extras</a></li>
            <li><a href="#">Media</a></li> 
          </ul>
        </li>
        <li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
      </ul>
</div>
    
<div id="overlay"></div>
    
</body>

最佳答案

您不是在创建 stacking context用于您的导航栏。

A stacking context is formed, anywhere in the document, by any element in the following scenarios:

Element with a position value "absolute" or "relative" and z-index value other than "auto".

你需要添加:

navbar {
  z-index: 5;
}

#myNavbar {
  z-index: 5;
  position: relative;
}

这将允许它们相对于主体和叠加层以及您拥有的任何其他东西堆叠。您也可以在 DOM 中将叠加层移动到它们之上，所以我猜语义上(？)它会堆叠在您的导航栏之前。但这可能不是必需的。

关于javascript - 单击汉堡按钮时覆盖并通过同一按钮禁用它，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51213092/

文章推荐： MySQL Export "Dumb"数据库版本(无键，无自增，只有数据表)

文章推荐： android - 如何使用android seekbar显示时间选择？

文章推荐： javascript - 在 if block 中 react 不渲染组件

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 单击汉堡按钮时覆盖并通过同一按钮禁用它