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上的点击而不是实际点击将触发的图像。因此窗口。

为您的img添加一个名为menu_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>

Answer 2

我相信你的问题源于你的event.target并不总是你所期望的那样。因此，当您打开下拉菜单并取消window.onclick时，myFunction()函数会立即执行。

我所做的是在您不想关闭下拉菜单的所有元素上添加一个新类dropdown-open。如果您检查该类而不是menu，则可以使用。

希望有所帮助。

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

<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('.dropdown-open')) {
    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>

下拉菜单不显示

2 个答案: