Question

我为我的网站制作了这个简单的下拉菜单。使用CSS，我做了应有的一切，但我的js文件有问题。任何人都可以帮助我如何更改js文件，以便当我第二次按下“汉堡包”按钮（toggleMenu）时下拉菜单崩溃（关闭）。如果没有，div“dropdown-menu-content”中的最后一个图像标记是一个关闭图标，但closeMenu（）函数不起作用。单击它时没有任何反应。

HTML和js文件如下。谢谢。

//Menu-toggle button
function toggleMenu() {
  var menuBox = document.getElementById('menu-display');

  if (menuBox.style.display == "block") {
    menuBox.style.display = "none";
  } else {
    menuBox.style.display = "block";
  }
}

function closeMenu() {
  var menuBox = document.getElementById('menu-display');
  menuBox.style.display = "none";
}

<!-- dropdown menu -->
<div class="dropdown-menu">
  <button id="dropdown-btn" onclick="toggleMenu()">
    <img src="images/menu_icon_blue.png" alt="menu_btn">
  </button>
  <div class="dropdown-menu-display">
    <div class="dropdown-menu-content">
      <a onclick="closeMenu()" href="index_eng.html" class="active">HJEM</a>
      <a onclick="closeMenu()" href="om_eng.html">OM OSS</a>
      <a onclick="closeMenu()" href="priser_eng.html">PRISER</a>
      <a onclick="closeMenu()" href="kontakt_eng.php">KONTAKT OSS</a>
      <a onclick="closeMenu()" href="index.html">NORSK</a>
      <a onclick="closeMenu()" href="#"><img src="images/close_icon_blue.png" alt="close"></a>
    </div>
  </div>
</div>
<!-- end dropdown menu -->

Answer 1

只需使用jQuery

CSS

#menu-display{
    display:none;
}

的Javascript

$('#dropdown-btn').click(function(
    $('#dropdown-menu-display').toggleClass('menu-display');
});

Answer 2

//Menu-toggle button
function toggleMenu() {
  var menuBox = document.getElementById('dropdown-menu-display');

  if (menuBox.style.display == "block") {
    menuBox.style.display = "none";
  } else {
    menuBox.style.display = "block";
  }
}

function closeMenu() {
  var menuBox = document.getElementById('dropdown-menu-display');
  menuBox.style.display = "none";
}

<!-- dropdown menu -->
<div class="dropdown-menu">
  <button id="dropdown-btn" onclick="toggleMenu()">
    <img src="images/menu_icon_blue.png" alt="menu_btn">
  </button>
  <div class="dropdown-menu-display" id="dropdown-menu-display">
    <div class="dropdown-menu-content">
      <a onclick="closeMenu()" href="index_eng.html" class="active">HJEM</a>
      <a onclick="closeMenu()" href="om_eng.html">OM OSS</a>
      <a onclick="closeMenu()" href="priser_eng.html">PRISER</a>
      <a onclick="closeMenu()" href="kontakt_eng.php">KONTAKT OSS</a>
      <a onclick="closeMenu()" href="index.html">NORSK</a>
      <a onclick="closeMenu()" href="#"><img src="images/close_icon_blue.png" alt="close"></a>
    </div>
  </div>
</div>
<!-- end dropdown menu -->

这是工作脚本！错误：您通过 ID 获取元素，但没有名为 menu-display 的ID。解决方案：我已经在课程中添加了 id =“dropdown-menu-display”，并在 toggleMenu（）和closeMenu（）函数中使用了此ID！

Answer 3

＆＃13;

var menuBox = document.getElementById('dropdown-menu');

//Menu-toggle button
function toggleMenu() {
  if(menuBox.style.display == "block") {
    menuBox.style.display = "none";
  } else {
    menuBox.style.display = "block";
  }
}

function closeMenu(){
  menuBox.style.display = "none";
}

＆＃13;

.dropdown-menu-display {display: none}
.dropdown-menu-display { border: 1px solid #eee; padding: 5px; width: 100px}
.dropdown-menu-content a {display:block; outline:0; text-decoration: none}
.dropdown-menu-content a:hover {background-color: #eee}

＆＃13;

<!-- dropdown menu -->
<div class="dropdown-menu">
  <button id="dropdown-btn" onclick="toggleMenu()">
    Button
  </button>
  <div id="dropdown-menu" class="dropdown-menu-display">
    <div class="dropdown-menu-content">
      <a onclick="closeMenu()" href="index_eng.html" class="active">HJEM</a>
      <a onclick="closeMenu()" href="om_eng.html">OM OSS</a>
      <a onclick="closeMenu()" href="priser_eng.html">PRISER</a>
      <a onclick="closeMenu()" href="kontakt_eng.php">KONTAKT OSS</a>
      <a onclick="closeMenu()" href="index.html">NORSK</a>
      <a onclick="closeMenu()" href="#">Close</a>
    </div>
  </div>
</div> <!-- end dropdown menu -->

＆＃13;

你有一个遗漏，你正在打电话

var menuBox = document.getElementById('menu-display');

但是，您已将div定义为类;

<div class="dropdown-menu-display">
...
</div>

为了使其正常运行，您必须为下拉菜单显示提供ID，或者您需要使用 document.querySelector（＆＃39;。下拉菜单显示＆＃39）

这是一个工作配置，我已经给出了你的菜单div和id并缓存了它的元素..

响应下拉菜单不会关闭

3 个答案: