javascript - 下拉菜单不显示

Question

我正在使用下面给出的下拉菜单代码。当菜单图像正常使用时，代码运行良好。但是，我希望相对放置下拉菜单，即使在调整浏览器窗口大小时(响应式网页设计)也能使菜单图标向右移动。所以我将图像元素包装在一个 div 元素中，这样我就可以使用绝对和相对属性来定位它们。但是一旦我将图像包装在 div 元素中，javascript 就会以某种方式停止工作。下拉菜单的显示仍然没有。

HTML

Javascript

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

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.menu')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.style="display:block") {
        openDropdown.style="display:none";
      }
    }
  }
}
</script>

Inside the body

<div class="header">
    <h1 class="title">Hello </h1>
    <div class="dragon-logo">
        <img id="dragon-img" src="pathtomascot.svg" />
    </div>
    <div class="menu">
    <img onclick="myFunction()" src="pathtomenuicon.svg">
       <div id="myDropdown" class="dropdown-content">
       <a href="#">Link 1</a>
       <a href="#">Link 2</a>
       <a href="#">Link 3</a>
       </div>
    </div>
</div>

CSS

/*For the menu icon*/
.menu {
display: block;
position: absolute;
z-index: 0;
height:55px; /* 150/640 */
width:55px;/*150/1536*/
top: 2.5%;
right: 10.0208333333%;
float: right;
cursor: pointer;
}

/* Dropdown button on hover & focus */
.menu:hover, .menu:focus {
    background-color: #3e8e41;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    margin-top: 
    margin-left: 69%;
    background-color: #f9f9f9;
    min-width: 11%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 2;
}

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

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

Answer 1

在您的 window.onclick 处理程序上，您将处理程序设置为忽略对 .menu 的点击，而不是对触发实际点击的图像的点击。因此是窗口。

为名为 menu_img 的 img 添加一个 id 和改变这个

  if (!event.target.matches('.menu'))

到

 if (!event.target.matches('#menu_img'))

下面的片段

/*For the menu icon*/

.menu {
  display: block;
  position: absolute;
  z-index: 0;
  height: 55px;
  /* 150/640 */
  width: 55px;
  /*150/1536*/
  top: 2.5%;
  right: 10.0208333333%;
  float: right;
  cursor: pointer;
}

#menu_img{
width:50px;
height:50px;
}
/* Dropdown button on hover & focus */

.menu:hover,
.menu:focus {
  background-color: #3e8e41;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  margin-top: margin-left: 69%;
  background-color: #f9f9f9;
  min-width: 11%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 2;
}


/* Links inside the dropdown */

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


/* Change color of dropdown links on hover */

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

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


  // Close the dropdown if the user clicks outside of it
  window.onclick = function(event) {
    if (!event.target.matches('#menu_img')) {
      var dropdowns = document.getElementsByClassName("dropdown-content");
      var i;
      for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.style = "display:block") {
          openDropdown.style = "display:none";
        }
      }
    }
  }
</script>

Inside the body

<div class="header">
  <h1 class="title">Hello </h1>
  <div class="dragon-logo">
    <img id="dragon-img" src="pathtomascot.svg" />
  </div>
  <div class="menu">
    <img id="menu_img" onclick="myFunction()" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRglT3Ib_vLAUHw92-ShYB4h7S0meWdH5l56XM1v4hdoJw2PCTdFg">
    <div id="myDropdown" class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>