Question

好的，所以我最近才开始涉及下拉列表和按钮等。我已经设法从固定位置导航栏运行3个列表。我已经成功运行的每个列表，但从来没有同时以同样的方式工作，在这个问题上，我有第一个和最后一个列表工作我想要的，但第二个列表，尽管有相同的脚本（除了id之外），不像其他两个一样显示。任何帮助解决我的问题将不胜感激。

（BEAR IN MIND，FUNCTION 3是第2号名单）（使用Dreamweaver CC 2017）

function myFunction1() {
  document.getElementById("myFruit").classList.toggle("show");
}

window.onclick = function(e) {
  if (!e.target.matches('dropbtn')) {
    var myDropdown =
      document.getElementById("myFruit");
    if (myDropdown.classList.contains('show')) {
      myDropdown.classList.remove('show');
    }
  }
}

function myFunction2() {
  document.getElementById("myScripts").classList.toggle("show");
}

window.onclick = function(e) {
  if (!e.target.matches('dropbtn')) {
    var myDropdown =
      document.getElementById("myScripts");
    if (myDropdown.classList.contains('show')) {
      myDropdown.classList.remove('show');
    }
  }
}

function myFunction3() {
  document.getElementById("posters").classList.toggle("show");
}

window.onclick = function(e) {
  if (!e.target.matches('dropbtn')) {
    var myDropdown =
      document.getElementById("posters");
    if (myDropdown.classList.contains('show')) {
      myDropdown.classList.remove('show');
    }
  }
}

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="css/assignment.css" media="screen" />
      <link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
   </head>
   <body>
      <div class="container">
         <div class="navigation">
            <div class="dropdown">
               <div class="dropbtn" onclick="myFunction1()">
                  <h4>Task 1</h4>
               </div>
               <div class="dropdown-content" id="myFruit">
                  <a href="#" target="_self">DragonFruit</a>
                  <a href="#" target="_self">Apricot</a>
                  <a href="#" target="_self">Lemon</a>
               </div>
            </div>
            <div class="dropdown">
               <div class="dropbtn" onclick="myFunction3()">
                  <h4>Task 2</h4>
               </div>
               <div class="dropdown-content" id="posters">
                  <a href="#" target="_self">banana</a>
                  <a href="#" target="_self">apple</a>
                  <a href="#" target="_self">pear</a>
                  <a href="#" target="_self">orange</a>
                  <a href="#" target="_self">strawberry</a>
                  <a href="#" target="_self">Grape</a>
                  <a href="#" target="_self">peach</a>
                  <a href="#" target="_self">lime</a>
               </div>
            </div>
            <div class="dropdown">
               <div class="dropbtn" onclick="myFunction2()">
                  <h4>Task3</h4>
                  <div class="dropdown-content" id="myScripts">
                     <a href="#" target="_self">little</a>
                     <a href="#" target="_self">men</a>
                     <a href="#" target="_self">dont</a>
                     <a href="#" target="_self">worry</a>
                     <a href="#" target="_self">about</a>
                     <a href="#" target="_self">what</a>
                     <a href="#" target="_self">the</a>
                     <a href="#" target="_self">links</a>
                     <a href="#" target="_self">display</a>
                     <a href="#" target="_self">am</a>
                     <a href="#" target="_self">I</a>
                     <a href="#" target="_self">Right</a>
                     <a href="#" target="_self">there</a>
                     <a href="#" target="_self">boys?</a>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

Answer 1

呃，我是在几个朋友的帮助下解决的。我没有使用脚本来启用悬停或点击和显示链接，而是发送了一个html / css组合，我从朋友css中复制了一段代码。

.dropdown:hover .dropdown-content {
display: block;

}

在删除所有功能和id等之后，它就像我原本打算的那样工作。 我无法相信这很容易解决，

捂脸

Dropdown，dropbtn和显示问题

1 个答案: