Question

目标是在标题中将前两个标题打开为可扩展的下拉菜单。我几乎没有编码经验，尤其是javascript和jquery。我已经实现了一个按钮（Plunker code）的效果，每当我添加第二个按钮时，它们都会有效地重叠，松散格式并将它们定位在错误的位置。

Codepen：https://gyazo.com/c8abca5a6c73fc5e4856e85727b57b55

标题代码（2个下拉列表+ 2个普通标题）：

  <ul>
    <style>
      .dropbtn {
          background-color: #282828;
          color: #AA9568;
          padding: 0px;
          font-size: 16px;
          border: none;
          cursor: pointer;
      }

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


      .dropdown {
          position: absolute;
        z-index: 999;
          display: inline-block;
      }

      .dropdown-content {
          display: none;
          position: absolute;
          top: 50%;
          left: 5px;
          z-index: 998;
          background-color: #282828;
          min-width: 180px;
          overflow: auto;
          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      }

      .dropdown-content a {
          color: #AA9568;
          padding: 3px 5px;
          text-decoration: none;
          display: block;
      }

      .dropdown a:hover {background-color: #282828}

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

    <div class="dropdown">
      <button onclick="myFunction()" class="dropbtn"><a href=#fab>ФАБРИКИ</a></button>
      <div id="myDropdown" class="dropdown-content">
        <a href="#nobilis">Nobilis</a>
        <a href="#colordeseda">Color de Seda</a>
        <a href="#eugenio">Eugenio Colombo</a>
        <a href="#libra">Libra</a>
      </div>
    </div>

    <script>
      /* When the user clicks on the button,
      toggle between hiding and showing the dropdown content */
      function myFunction() {
          document.getElementById("myDropdown").classList.toggle("show");
      }

      function filterFunction() {
          var input, filter, ul, li, a, i;
          input = document.getElementById("myInput");
          filter = input.value.toUpperCase();
          div = document.getElementById("myDropdown");
          a = div.getElementsByTagName("a");
          for (i = 0; i < a.length; i++) {
              if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
                  a[i].style.display = "";
              } else {
                  a[i].style.display = "none";
              }
          }
      }
    </script>

    <li>|</li>

    <style>
      .dropbtn {
            background-color: #282828;
            color: #AA9568;
            padding: 0px 0px 0px 20px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

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


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

        .dropdown-content1 {
          display: none;
          position: absolute;
          top: 40%;
          left: 35%;
          z-index: 999;
          background-color: #282828;
          min-width: 180px;
          overflow: auto;
          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }

        .dropdown-content a {
            color: #AA9568;
            padding: 3px 5px;
            text-decoration: none;
            display: block;
        }

        .dropdown a:hover {background-color: #282828}

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


    <div class="dropdown">
      <button onclick="dealerFunction()" class="dropbtn"><a href=#fab>ДИЛЕРЫ</a></button>
      <div id="Dealersdropdown" class="dropdown-content1">
        <a href="#nobilis">Nobilis</a>
        <a href="#colordeseda">Color de Seda</a>
        <a href="#eugenio">Eugenio Colombo</a>
        <a href="#libra">Libra</a>
      </div>
    </div>

    <script>
      /* When the user clicks on the button,
        toggle between hiding and showing the dropdown content */
        function dealerFunction() {
            document.getElementById("Dealersdropdown").classList.toggle("show");
        }

        function filterFunction() {
            var input, filter, ul, li, a, i;
            input = document.getElementById("myInput");
            filter = input.value.toUpperCase();
            div = document.getElementById("Dealersdropdown");
            a = div.getElementsByTagName("a");
            for (i = 0; i < a.length; i++) {
                if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
                    a[i].style.display = "";
                } else {
                    a[i].style.display = "none";
                }
            }
        }
    </script>

    <li>|</li>
    <li><a href="http://www.123contactform.com/form-2178643/My-Form">Сотрудничество</a></li>
    <li>|</li>
    <li><a href="contact.html">Контакты</a></li>
  </ul>
</div>

是的，我知道这是不整洁的，但我是一个新手，仍处于学习的阶段。提前谢谢。

Answer 1

两个下拉列表都具有相同的ID：＆＃34; myDropdown ＆＃34;，更改其中一个，它们将被显示并定位在不同的位置。（在页面上拥有相同ID的元素真的很糟糕。）

要进一步定位它们，请从固定＆＃39;更改其css位置。到＆＃39; 绝对＆＃39;，然后您可以尝试顶部，左，正确，底部找到一个好位置（这很容易实现，因为他们的父元素的位置设置为＆＃39; relative ＆＃39;以及他们所有的孩子将被定位绝对引用它们而不是窗口本身。）

下拉Javascript菜单重叠

1 个答案: