javascript - CSS/Javascript 下拉菜单问题

Question

大家好我是网页设计的新手，我目前正在设计一个网站，我试图在其中使用使用 CSS 和 Javascript 制作的下拉菜单。我几乎已经设法让一切正常工作，但唯一需要解决的问题是下拉菜单内容出现在容器的左侧，而不是相关父菜单选项的下方。

Screenshot

function myFunction1() {
  document.getElementById("myDropdown1").classList.toggle("show");
}

function myFunction2() {
  document.getElementById("myDropdown2").classList.toggle("show");
}

function myFunction3() {
  document.getElementById("myDropdown3").classList.toggle("show");
}

function myFunction4() {
  document.getElementById("myDropdown4").classList.toggle("show");
}

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

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


window.onclick = function(event) {
  if (!event.target.matches('.dropbtn2')) {

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


window.onclick = function(event) {
  if (!event.target.matches('.dropbtn3')) {

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


window.onclick = function(event) {
  if (!event.target.matches('.dropbtn4')) {

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

.navbar {
  float: left;
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  height: auto;
  width: 100%;
  display: inline-block;
  margin: 0;
  padding: 0;
  position: relative;
}

.navbar a {
  font-size: 2em;
  font-weight: 100;
  color: white;
  text-align: center;
}

.dropdown {
  width: 100%;
}

.dropdown-content1 {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 16.667%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  padding: 0px;
  height: auto;
}

.dropdown-content1 a {
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 0px;
  background-color: #000000;
  border: 1px solid white;
  text-align: center;
  height: auto;
}

.dropdown-content1 a:hover {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 0px;
  background-color: #FFFFFF;
  border: 1px solid black;
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  text-align: center;
  height: auto;
  transition-duration: 0.5s;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2)
}

.dropdown-content2 {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 16.667%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  padding: 0px;
}

.dropdown-content2 a {
  color: white;
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 0px;
  background-color: #000000;
  border: 1px solid white;
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  text-align: center;
  height: auto;
  font-size: 2em;
}

.dropdown-content2 a:hover {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 0px;
  background-color: #FFFFFF;
  border: 1px solid black;
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  text-align: center;
  height: auto;
  transition-duration: 0.5s;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2)
}

.dropdown-content3 {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 16.667%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  padding: 0px;
}

.dropdown-content3 a {
  color: white;
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 0px;
  background-color: #000000;
  border: 1px solid white;
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  text-align: center;
  height: auto;
  font-size: 2em;
}

.dropdown-content3 a:hover {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 0px;
  background-color: #FFFFFF;
  border: 1px solid black;
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  text-align: center;
  height: auto;
  transition-duration: 0.5s;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2)
}

.dropdown-content4 {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 16.667%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  padding: 0px;
}

.dropdown-content4 a {
  color: white;
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 0px;
  background-color: #000000;
  border: 1px solid white;
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  text-align: center;
  height: auto;
  font-size: 2em;
}

.dropdown-content4 a:hover {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 0px;
  background-color: #FFFFFF;
  border: 1px solid black;
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  text-align: center;
  height: auto;
  transition-duration: 0.5s;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2)
}

.show {
  display: block;
}

.btn1 {
  background-color: #71aace;
  color: white;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: Impact;
  border: 1px solid white;
  cursor: pointer;
  width: 16.667%;
  float: left;
}

.btn1:hover,
.btn1:focus {
  background-color: #FFFFFF;
  color: black;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: Impact;
  border: 1px solid black;
  cursor: pointer;
  width: 16.667%;
  float: left;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  transition-duration: 0.5s;
}

.dropbtn1 {
  background-color: #6c73b1;
  color: white;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  border: 1px solid white;
  cursor: pointer;
  width: 16.667%;
  float: left;
}

.dropbtn1:hover,
.dropbtn1:focus {
  background-color: #FFFFFF;
  color: black;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: "Impact";
  border: 1px solid black;
  cursor: pointer;
  width: 16.667%;
  float: left;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  transition-duration: 0.5s;
}

.dropbtn2 {
  background-color: #d3c530;
  color: white;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: Impact;
  border: 1px solid white;
  cursor: pointer;
  width: 16.667%;
  float: left;
}

.dropbtn2:hover,
.dropbtn2:focus {
  background-color: #FFFFFF;
  color: black;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: "Impact";
  border: 1px solid black;
  cursor: pointer;
  width: 16.667%;
  float: left;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  transition-duration: 0.5s;
}

.dropbtn3 {
  background-color: #82c845;
  color: white;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: Impact;
  border: 1px solid white;
  cursor: pointer;
  width: 16.667%;
  float: left;
}

.dropbtn3:hover,
.dropbtn3:focus {
  background-color: #FFFFFF;
  color: black;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: "Impact";
  border: 1px solid black;
  cursor: pointer;
  width: 16.667%;
  float: left;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  transition-duration: 0.5s;
}

.dropbtn4 {
  background-color: #8f65a1;
  color: white;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: Impact;
  border: 1px solid white;
  cursor: pointer;
  width: 16.667%;
  float: left;
}

.dropbtn4:hover,
.dropbtn4:focus {
  background-color: #FFFFFF;
  color: black;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: "Impact";
  border: 1px solid black;
  cursor: pointer;
  width: 16.667%;
  float: left;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  transition-duration: 0.5s;
}

<div class="navbar">

  <button class="btn1" value="About Us" onclick="window.location.href=" https://uklivesound.000webhostapp.com/aboutus.html>About Us</button>

  <div class="dropdown">
    <button class="dropbtn1" onclick="myFunction1()">Rehearsals</button>
    <div class="dropdown-content1" id="myDropdown1">
      <a href="https://uklivesound.000webhostapp.com/liveroom.html">Live Room</a>
      <a href="https://uklivesound.000webhostapp.com/isolationroom.html">Isolation Room</a>
    </div>
  </div>

  <div class="dropdown">
    <button class="dropbtn2" onclick="myFunction2()">Recording</button>
    <div class="dropdown-content2" id="myDropdown2">
      <a href="https://uklivesound.000webhostapp.com/audiorecording.html">Audio</a>
      <a href="https://uklivesound.000webhostapp.com/videorecording.html">Video</a>
    </div>
  </div>

  <div class="dropdown">
    <button class="dropbtn3" onclick="myFunction3()">For Hire</button>
    <div class="dropdown-content3" id="myDropdown3">
      <a href="https://uklivesound.000webhostapp.com/hirepackages.html">Event Packages</a>
      <a href="https://uklivesound.000webhostapp.com/largeevents.html">Large Events</a>
      <a href="https://uklivesound.000webhostapp.com/equipmenthire.html">Equipment</a>
      <a href="https://uklivesound.000webhostapp.com/bandhire.html">Bands</a>
    </div>
  </div>

  <div class="dropdown">
    <button class="dropbtn4" onclick="myFunction4()">Other Services</button>
    <div class="dropdown-content4" id="myDropdown4">
      <a href="https://uklivesound.000webhostapp.com/buyandsell.html">Buy & Sell</a>
      <a href="https://uklivesound.000webhostapp.com/repairs.html">Repairs</a>
    </div>
  </div>

  <button class="btn2" value="Contact Us" onclick="window.location.href=" https://uklivesound.000webhostapp.com/contact.html>Contact Us</button>

Answer 1

您的帖子中有很多不必要的代码和代码重复。大部分都可以删除。您也没有正确设置 HTML 结构、类名和 ID 来避免过多的代码或提供良好的语义。

菜单实际上只是一个美化的选项列表。因此，用于创建一个的最佳语义元素是 <ul>。带有 <li> 的元素它里面的元素。通过一点 CSS 样式，您可以删除元素符号并将垂直布局更改为水平布局。这通常是菜单的制作方式。

接下来，谈到类和 ID。给出需要独特处理的元素 id属性并将类分配给需要作为组的一部分设置样式的元素。这使得样式变得非常简单，并且消除了冗余的需要。

当谈到 JavaScript 时，不要使用内联 HTML 事件属性( onclick 、 onmouseover 等)。 <强> Here is another post of mine 这解释了不使用那种设置事件处理程序的古老方法的众多原因。

所以，这是您的菜单的修改版本。您会发现代码少了多少，理解起来也简单多了。

// Get references to all elements you'll be working with:

// All the drop downs
var dd = document.querySelectorAll(".db");

// Set up each of the drop downs to invoke the toggleElement function when clicked
// and to hide the menu when the mouse moves off an open menu
for(var i = 0; i < dd.length; i++){
  dd[i].addEventListener("click", function(evt){ toggleElement(evt.target); });
  dd[i].addEventListener("mouseout", function(evt){ hideElement(evt.target); });  
}

// This one function does the job of the myFunction1 - myFunction4 functions
function toggleElement(element) {
  element.querySelector("ul").classList.toggle("hide");
}

function hideElement(element) {
  // If the element is not one of the two link buttons, hide its menu
  var el = element.querySelector("ul");
  
  if(el){
    el.classList.add("hide");
  }
}

/* Master styles for menu. The font will inherit down to children. 
   When specifying font names, use quotes around font names that contain spaces. 
   You had " sans-serif", which would never work because you included a leading
   space in the string. Plus sans-serif doesn't have a space in it, so it doesn't 
   need quotes anyway. */
.navbar {
      font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, "sans-serif";
      margin: 0;
      padding: 0;
      list-style:none;
}
 

/* These are the actual menu items*/
li { 
     text-align:center;
     color: white;
     margin:0;
     padding:0;
}
    
a { text-decoration: none; }
    
/* This simple class is applied to the drop down content from the start
   and then simply removed or added via JavaScript to show/hide them. */    
.hide { display: none; }
    
/* All drop buttons have many property values in common. Specify those once. */
.db { cursor: pointer; display:inline-block; width:calc(16.667% - 4px); }

/* Then just worry about what's different between them */
#dropbtn1, #dropbtn6 { background-color: #71aace; }
#dropbtn2 { background-color: #6c73b1; }
#dropbtn3 { background-color: #d3c530; }
#dropbtn4 { background-color: #82c845; }
#dropbtn5 { background-color: #8f65a1; }     

.dropdown-content {
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  list-style:none;
  position:absolute; /* This keeps the drop down from throwing off the layout when shown */
  padding:0;
  width:calc(16.667% - 4px); /* You have to account for the width of the borders. */
}
    
.dropdown-content li { text-align:left; }

.dropdown-content:hover {
  color: black;
  background-color: #FFFFFF;
  border: 1px solid black;
  transition-duration: 0.5s;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index:-1;
  display:block;
}

/* All drop button and regular button hover and focus styles are the same, just specify once */
.db:hover, .db:focus, .btn:hover, .btn:focus {
  background-color: #FFFFFF;
  color: black;
  cursor: pointer;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  transition-duration: 0.5s;
}

<ul class="navbar">
  <li id="dropbtn1" class="db"><a href="https://uklivesound.000webhostapp.com/aboutus.html">About Us</a></li>

  <!-- Use id for unique identifiers, Use classes for common traits
       This button is specifically dropbtn1, but it is styled like 
       all other drop buttons. -->
  <li id="dropbtn1" class="db">Rehearsals
    <ul class="dropdown-content hide" id="myDropdown1">
      <li><a href="https://uklivesound.000webhostapp.com/liveroom.html">Live Room</a></li>
      <li><a href="https://uklivesound.000webhostapp.com/isolationroom.html">Isolation Room</a></li>
    </ul>
  </li>

 <li id="dropbtn2" class="db">Recording
   <ul class="dropdown-content hide" id="myDropdown2">
     <li><a href="https://uklivesound.000webhostapp.com/audiorecording.html">Audio</a></li>
     <li><a href="https://uklivesound.000webhostapp.com/videorecording.html">Video</a></li>
   </ul>
 </li>

 <li id="dropbtn3" class="db">For Hire
   <ul class="dropdown-content hide" id="myDropdown3">
     <li><a href="https://uklivesound.000webhostapp.com/hirepackages.html">Event Packages</a></li>
     <li><a href="https://uklivesound.000webhostapp.com/largeevents.html">Large Events</a></li>
     <li><a href="https://uklivesound.000webhostapp.com/equipmenthire.html">Equipment</a></li>
     <li><a href="https://uklivesound.000webhostapp.com/bandhire.html">Bands</a></li>
   </ul>
 </li>

 <li id="dropbtn4" class="db">Other Services
    <ul class="dropdown-content hide" id="myDropdown4">
      <li><a href="https://uklivesound.000webhostapp.com/buyandsell.html">Buy & Sell</a></li>
      <li><a href="https://uklivesound.000webhostapp.com/repairs.html">Repairs</a></li>
    </ul>
 </li>
        
 <li id="dropbtn6" class="db"><a href="https://uklivesound.000webhostapp.com/contact.html">Contact Us</a></li>
   </ul>