3

我在如何使叠加层按我的意愿工作时遇到问题。问题是当我点击汉堡按钮时，覆盖覆盖了引导导航栏甚至滑动菜单。我想要的是覆盖只影响 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>

4

1 回答 1

0

您没有为导航栏创建堆叠上下文。

在以下场景中，任何元素都会在文档中的任何位置形成堆叠上下文：

  1. 位置值“绝对”或“相对”且 z-index 值不是“自动”的元素。

您需要添加：

navbar {
  z-index: 5;
}

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

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

于 2018-07-06T15:56:15.953 回答