Question

我正在创建一个测试下拉菜单。打开菜单按钮可以正常工作，但是关闭按钮不可单击/无法悬停/等。按下打开菜单按钮后，应该使另一个按钮可见并可点击。

不确定关闭按钮为何不起作用，点击时其display属性会重新设置为block。

function menu_change() {
  var burg = document.getElementById("burg");
  var cross = document.getElementById("cross");

  var body_freeze = document.getElementById("body_freeze");

  var nav_list = document.getElementById("nav_list");

  var nav_items = document.getElementsByClassName("nav_item");

  if (burg.style.display === 'none') {
    burg.style.display = 'block';
    cross.style.display = 'none';
    nav_list.style.display = 'none';

    body_freeze.style.position = 'relative';
  } else {
    burg.style.display = 'none';
    cross.style.display = 'block';
    nav_list.style.display = 'block';

    body_freeze.style.position = 'fixed';
  }
}

.fixed_nav {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 50px;
  background-color: white;
  border-bottom: 1px solid black;
  box-shadow: 0 4px 8px 0 rgb(0, 0, 0, .2);
}

#burg {
  z-index: 3;
  float: right;
  display: block;
  margin: 20px;
  width: 100px;
  height: auto;
}

#burg:hover {
  background-color: gray;
}

#cross {
  z-index: 3;
  margin: 20px;
  display: none;
  float: right;
  width: 100px;
  height: auto;
}

#cross:hover {
  background-color: gray;
}

#nav_list {
  height: 100vh;
  width: 100%;
  background-color: white;
  display: none;
  z-index: 1;
}

#dummy_text {
  margin-top: 50px;
}

.nav_item {
  margin-top: 50px;
  color: red;
  width: 100%;
  background-color: white;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  z-index: 2;
}

#body_freeze {}

<html>

<head>
  <title>ExampleError</title>
</head>

<body>
  <nav class="fixed_nav">
    <button id="burg" onclick="menu_change();">
  &#9776;
  </button>

    <button id="cross" onclick="menu_change();">
  &#735;
  </button>
    <ul id="nav_list">
      <div class="nav_item">
        <a href="#">
          <li>Inventory</li>
        </a>
      </div>

      <div class="nav_item">
        <a href="#">
          <li>Finance</li>
        </a>
      </div>
    </ul>
  </nav>

  <div id="body_freeze">
    <p id="dummy_text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lobortis elementum nibh tellus molestie nunc non blandit massa. Sit amet purus gravida quis blandit. Ac feugiat sed lectus vestibulum
      mattis ullamcorper velit. Odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Egestas sed tempus urna et pharetra pharetra massa massa. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Rutrum tellus pellentesque
      eu tincidunt tortor aliquam nulla facilisi. In pellentesque massa placerat duis. Erat velit scelerisque in dictum non. Massa placerat duis ultricies lacus sed turpis tincidunt. Urna molestie at elementum eu facilisis sed odio. Ornare arcu odio ut
      sem nulla. Consequat interdum varius sit amet mattis vulputate. Justo donec enim diam vulputate ut. Etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Risus at ultrices mi tempus. Vestibulum morbi blandit cursus risus at ultrices
      mi tempus. Ante metus dictum at tempor commodo. Turpis nunc eget lorem dolor. Leo vel orci porta non pulvinar neque. Volutpat sed cras ornare arcu dui vivamus arcu felis bibendum. Proin sed libero enim sed faucibus. Lacus vel facilisis volutpat
      est velit. Scelerisque eleifend donec pretium vulputate sapien. Curabitur gravida arcu ac tortor. Massa eget egestas purus viverra accumsan in nisl nisi scelerisque. Viverra aliquet eget sit amet tellus cras. Massa tempor nec feugiat nisl pretium
      fusce id velit ut. Ultrices sagittis orci a scelerisque. Bibendum arcu vitae elementum curabitur vitae nunc sed. Enim ut sem viverra aliquet. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Sed euismod nisi porta lorem mollis aliquam.
      Ridiculus mus mauris vitae ultricies. Ullamcorper velit sed ullamcorper morbi. Adipiscing elit pellentesque habitant morbi tristique. Nibh venenatis cras sed felis eget velit. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan.
      Porttitor eget dolor morbi non arcu risus quis varius. Tortor aliquam nulla facilisi cras fermentum odio eu. In iaculis nunc sed augue lacus viverra vitae congue. Ac felis donec et odio pellentesque diam volutpat. Ut lectus arcu bibendum at varius
      vel pharetra vel. Feugiat in ante metus dictum at. Diam sit amet nisl suscipit. Nam aliquam sem et tortor. Arcu ac tortor dignissim convallis aenean et. Sed risus ultricies tristique nulla aliquet enim tortor at. Rhoncus dolor purus non enim praesent
      elementum facilisis. Integer feugiat scelerisque varius morbi enim nunc faucibus a. At varius vel pharetra vel turpis nunc eget lorem. Quam adipiscing vitae proin sagittis. Gravida cum sociis natoque penatibus. Eu feugiat pretium nibh ipsum consequat
      nisl vel. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Fringilla ut morbi tincidunt augue interdum velit euismod in. Enim tortor at auctor urna nunc. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Arcu
      cursus euismod quis viverra nibh cras pulvinar mattis. A diam maecenas sed enim. Tortor id aliquet lectus proin nibh nisl condimentum. Ut enim blandit volutpat maecenas volutpat blandit aliquam. Venenatis tellus in metus vulputate. Mollis nunc sed
      id semper risus. Lacus luctus accumsan tortor posuere ac ut consequat semper. Euismod nisi porta lorem mollis aliquam ut porttitor leo a.
    </p>
  </div>
</body>

</html>

Answer 1

您的问题是，您将元素“ body_freeze”定义为固定的，但未定义其确切位置，因此它与按钮重叠，阻止您单击它。我编辑了您的代码，并在样式定义中为id id_body_freeze添加了position，top和z-index属性。

function menu_change() {
  var burg = document.getElementById("burg");
  var cross = document.getElementById("cross");

  var body_freeze = document.getElementById("body_freeze");

  var nav_list = document.getElementById("nav_list");

  var nav_items = document.getElementsByClassName("nav_item");


  if (burg.style.display === 'none') {
	
  burg.style.display = 'block';
  cross.style.display = 'none';
  nav_list.style.display = 'none';
  
  body_freeze.style.position = 'relative';

  } else {
  
  burg.style.display = 'none';
  cross.style.display = 'block';
  nav_list.style.display = 'block';
  
  body_freeze.style.position = 'fixed';
  
  }


}

.fixed_nav {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 50px;
  background-color: white;
  border-bottom: 1px solid black;
  box-shadow: 0 4px 8px 0 rgb(0, 0, 0, .2);
}

#burg {
  z-index:3;
  float: right;
  display: block;
  margin: 20px;
  
  width: 100px;
  height: auto;
}

#burg:hover
{
  background-color: gray;
}

#cross {
  z-index:3;
  margin:20px;
  display: none;
  float: right;
  width:100px;
  height:auto;
}

#cross:hover
{
  background-color: gray;
}

#nav_list {
  height: 100vh;
  width: 100%;
  background-color: white;
  display: none;
  z-index: 1;
}

#dummy_text {
  margin-top: 50px;
}

.nav_item {
  margin-top:50px;
  color: red;
  width:100%;
  background-color:white;
  border-top:1px solid black;
  border-bottom: 1px solid black;
  z-index:2;
}

#body_freeze {
position: relative;
top: 100px;
z-index: 1;
}

<html>

  <head>

    <title>ExampleError</title>
  </head>


  <body>
    <nav class="fixed_nav">

      <button id="burg" onclick="menu_change();">
  &#9776;
  </button>

      <button id="cross" onclick="menu_change();">
  &#735;
  </button>

      <ul id="nav_list">

        <div class="nav_item">
          <a href="#">
            <li>Inventory</li>
          </a>
        </div>

        <div class="nav_item">
          <a href="#">
            <li>Finance</li>
          </a>
        </div>
      </ul>
    </nav>

    <div id="body_freeze">



      <p id="dummy_text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lobortis elementum nibh tellus molestie nunc non blandit massa. Sit amet purus gravida quis blandit. Ac feugiat sed lectus vestibulum
        mattis ullamcorper velit. Odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Egestas sed tempus urna et pharetra pharetra massa massa. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Rutrum tellus pellentesque
        eu tincidunt tortor aliquam nulla facilisi. In pellentesque massa placerat duis. Erat velit scelerisque in dictum non. Massa placerat duis ultricies lacus sed turpis tincidunt. Urna molestie at elementum eu facilisis sed odio. Ornare arcu odio
        ut sem nulla. Consequat interdum varius sit amet mattis vulputate. Justo donec enim diam vulputate ut. Etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Risus at ultrices mi tempus. Vestibulum morbi blandit cursus risus at ultrices
        mi tempus. Ante metus dictum at tempor commodo. Turpis nunc eget lorem dolor. Leo vel orci porta non pulvinar neque. Volutpat sed cras ornare arcu dui vivamus arcu felis bibendum. Proin sed libero enim sed faucibus. Lacus vel facilisis volutpat
        est velit. Scelerisque eleifend donec pretium vulputate sapien. Curabitur gravida arcu ac tortor. Massa eget egestas purus viverra accumsan in nisl nisi scelerisque. Viverra aliquet eget sit amet tellus cras. Massa tempor nec feugiat nisl pretium
        fusce id velit ut. Ultrices sagittis orci a scelerisque. Bibendum arcu vitae elementum curabitur vitae nunc sed. Enim ut sem viverra aliquet. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Sed euismod nisi porta lorem mollis
        aliquam. Ridiculus mus mauris vitae ultricies. Ullamcorper velit sed ullamcorper morbi. Adipiscing elit pellentesque habitant morbi tristique. Nibh venenatis cras sed felis eget velit. Leo integer malesuada nunc vel risus commodo viverra maecenas
        accumsan. Porttitor eget dolor morbi non arcu risus quis varius. Tortor aliquam nulla facilisi cras fermentum odio eu. In iaculis nunc sed augue lacus viverra vitae congue. Ac felis donec et odio pellentesque diam volutpat. Ut lectus arcu bibendum
        at varius vel pharetra vel. Feugiat in ante metus dictum at. Diam sit amet nisl suscipit. Nam aliquam sem et tortor. Arcu ac tortor dignissim convallis aenean et. Sed risus ultricies tristique nulla aliquet enim tortor at. Rhoncus dolor purus
        non enim praesent elementum facilisis. Integer feugiat scelerisque varius morbi enim nunc faucibus a. At varius vel pharetra vel turpis nunc eget lorem. Quam adipiscing vitae proin sagittis. Gravida cum sociis natoque penatibus. Eu feugiat pretium
        nibh ipsum consequat nisl vel. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Fringilla ut morbi tincidunt augue interdum velit euismod in. Enim tortor at auctor urna nunc. Dolor sed viverra ipsum nunc aliquet bibendum enim
        facilisis gravida. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. A diam maecenas sed enim. Tortor id aliquet lectus proin nibh nisl condimentum. Ut enim blandit volutpat maecenas volutpat blandit aliquam. Venenatis tellus in metus
        vulputate. Mollis nunc sed id semper risus. Lacus luctus accumsan tortor posuere ac ut consequat semper. Euismod nisi porta lorem mollis aliquam ut porttitor leo a.
      </p>





    </div>


  </body>

</html>

JSFiddle下拉按钮不可单击

1 个答案: