javascript - JSFiddle 下拉按钮不可点击

标签 javascript html css

我正在创建一个测试下拉菜单。打开菜单按钮工作正常，但关闭按钮不可点击/悬停/等。当打开菜单按钮被按下时，它应该使另一个可见和可点击。

不确定为什么关闭按钮不起作用，它的 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>

最佳答案

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

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>

关于javascript - JSFiddle 下拉按钮不可点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52012844/

上一篇：html - 删除移动页面底部的正文空格

下一篇：html - 如何调整 CSS 以使关闭按钮看起来在正确的位置？

相关文章：

javascript - 如何在 Node 中的文本中替换/注入(inject) html 标签？

php - 在 Flash 应用程序中禁用 PHP 或 JavaScript 中的浏览器缓存

javascript - 无法从 redux 存储中存储和检索状态

javascript - CSS 不在 MVC 5 View For image-gallery 中的事件缩略图下方绘制边框

javascript - 如何在没有自定义 HTML 标签的情况下使用 AngularJS？

javascript - 将 html 类的属性与 javascript 进行比较

javascript - AJAX 按钮过滤器更新代码更新(查看新代码)

html - 更改 Bootstraps 轮播中的箭头颜色

javascript - 条形图插件 - IE9-110 问题，图表在容器外扩展

html - CSS 在 IE 中搞砸了(就像一半的 CSS 没有加载)

©2024 IT工具网  联系我们