Question

我正在尝试制作一个带有两个下拉菜单“家电”和“家具”的导航栏我可以让一个人工作，但我遇到了第二个问题，我假设我的功能一次只适用于其中一个，但无法弄清楚为什么另一个不工作也无法让它工作。 `

<table>
  <tr>
     <td><a href="home.html">Home</a>
     <td class="dropdown"><a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Appliances</a>
    <div class="dropdown-content" id="drop">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
     <td><td class="dropdown"><a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Furniture</a>
    <div class="dropdown-content" id="drop">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
     <td><a href="bed.html">Bedding</a>
     <td><a href="contact.html">Contact Us</a>
     <td><a href="cart.html">Shopping Cart</a>
  </tr>
</table>


<script>

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

window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var d = 0; d < dropdowns.length; d++) {
      var openDropdown = dropdowns[d];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

这是css

    td a, .dropbtn {
    display: inline-block;
    color: #b35900;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

td a:hover, .dropdown:hover .dropbtn {
    background-color:#ff0000;
}

td.dropdown {
    display: inline-block;
}

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

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

.dropdown-content a:hover {background-color: #ff0000}

Answer 1

<table>
  <tr>
   <td><a href="home.html">Home</a>
   <td class="dropdown"><a href="javascript:void(0)" class="dropbtn" onclick="myFunction("drop1")">Appliances</a>
<div class="dropdown-content" id="drop1">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
 <td><td class="dropdown"><a href="javascript:void(0)" class="dropbtn" onclick="myFunction("drop2")">Furniture</a>
<div class="dropdown-content" id="drop2">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
     <td><a href="bed.html">Bedding</a>
     <td><a href="contact.html">Contact Us</a>
     <td><a href="cart.html">Shopping Cart</a>
  </tr>
</table>


<script>

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

</script>

至少它是一个开始。您需要在dom中的所有内容上使用唯一ID，因此getElemenetById调用只会找到其中一个。将id添加为param会将它们分开。

Answer 2

对于像菜单这样的东西，使用id可能比它的价值更麻烦（无论如何都是这样）

当事件被触发时，事件变量被传递给处理程序，它具有识别被按压元素所需的一切

function myFunction(e) {
    e=e||event;
    if (e.target.classList.contains("dropdown")) {
      e.target.classList.toggle("show");
    }
}

我还没有对此进行过测试，我认为它不会与您提供的代码一起使用，因为没有css定义＆＃34; show＆＃34;除非你在粘贴它时错过了它。

尝试用javascript制作下拉菜单

2 个答案: