(HTML,CSS,JS) 尝试添加可点击的下拉菜单、图标按钮

Question

我在我的网站导航栏上制作了“汉堡包”图标。 我添加了简单的动画 JavaScript，效果很好。 现在我想让图标打开 Clickable Dropdown，我有点困惑，因为我已经在使用脚本文件和类。

我不确定如何将两个 JS 代码组合到同一个类，以及如何使用原始图标栏编辑下拉链接。

这是我的图标：HTML：

<div class="hamburger" onclick="myFunction(this)"> 

        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>

</div>

CSS：

.hamburger {
      cursor: pointer;
      color:#333;
      list-style: none;
      float: right;
      padding: 18px;
      position: relative;
      display: inline-block; 
}

Javascript：

function myFunction(x) {
    x.classList.toggle("change");
}

---

最后，这是我要添加的下拉列表：

HTML：

    <div class="dropdown">
      <button onclick="myFunction()" class="dropbtn">Dropdown</button>
      <div id="myDropdown" class="dropdown-content">
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
      </div>
    </div>

CSS：

    .dropbtn {
      background-color: #3498DB;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
    }

    .dropbtn:hover, .dropbtn:focus {
      background-color: #2980B9;
    }

    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      overflow: auto;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown a:hover {background-color: #ddd;}

    .show {display: block;}

Javascript：

    function myFunction() {
      document.getElementById("myDropdown").classList.toggle("show");
    }

    // Close the dropdown if the user clicks outside of it
    window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }

Answer 1

您可以对两个元素使用相同的函数。 我认为主要问题是当您在下拉菜单外单击时使下拉菜单消失。 这个“外部”包括汉堡菜单图标。

这是一个工作示例：

 // Keep a refernce for dropdown to access it from any function const dropdown = document.getElementById("myDropdown"); function myFunction() { dropdown.classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(event) { // Make sure ".hamburger" or any other class is included so when it is clicked it won't hide the dropdown if (!event.target.matches('.dropbtn, .hamburger')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } }

 .hamburger { cursor: pointer; color: #333; list-style: none; float: right; padding: 18px; position: relative; display: inline-block; width: 20px; } .hamburger>div { height: 2px; background-color: black; width: 100%; margin-bottom: 5px; } .dropbtn { background-color: #3498DB; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #2980B9; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover { background-color: #ddd; } .show { display: block; }

 <div class="dropdown"> <div class="hamburger" onclick="myFunction()"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> <div id="myDropdown" class="dropdown-content"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#contact">Contact</a> </div> </div>

Answer 2

我试过这个解决方案，希望它对你有用：

<style>
  .hamburger {
    cursor: pointer;
    color: #333;
    list-style: none;
    float: right;
    padding: 18px;
    position: relative;
    display: inline-block;
  }

  .bar1, .bar2,.bar3 {
    width: 40px;
    height: 2px;
    background-color: black;
    margin-bottom: 5px;
  }

  .dropbtn {
    background-color: #3498db;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }

  .dropbtn:hover,
  .dropbtn:focus {
    background-color: #2980b9;
  }

  .dropdown {
    position: relative;
    display: inline-block;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    top: 50px;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }

  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  .dropdown a:hover {
    background-color: #ddd;
  }

  .show {
    display: block;
  }
</style>



<div class="dropdown">
    <div class="hamburger" onclick="myFunction()">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
      </div>
  <!-- <button onclick="myFunction()" class="dropbtn">Dropdown</button> -->
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<script>

  function myFunction() {
    const dropdown = document.getElementById('myDropdown') 
    dropdown.classList.toggle('show')
  }

  // Close the dropdown if the user clicks outside of it
  window.onclick = function(event) {
    if (!event.target.matches('.hamburger')) {
      var dropdowns = document.getElementsByClassName('dropdown-content')
      var i
      for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i]
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show')
        }
      }
    }
  }
</script>

正如你所看到的，我注释掉了按钮，我不确定你为什么要同时使用按钮和汉堡包按钮。 还为'bar; 添加了一些样式； div，否则您将看不到任何“汉堡包”。

最后更改您在窗口事件侦听器上匹配的内容，以查看它是否包含 'hamburger' 类。