通过 img 下拉菜单

Question

我正在为我和我的朋友创建一个个性化网站，在中心的顶部我有一些社交媒体链接。我需要为每张社交媒体图片添加两个链接，因为我和我的朋友都在该网站上。我正在尝试使用事件侦听器让 onclick 函数提供一个包含指向两个站点的链接的下拉菜单。它不工作。这是适当的代码。

Html:

<div id="social-media-links">      
  <div class="drop-container">
    <div class="drop-button"><img onclick="myFunction()" id="facebook"src="images/facebook">
      <div class="drop-menu">
       <a href="https://www.facebook.com/30luv_-110625097180857/">30luv_</a>
       <a href="https://www.facebook.com/pgiovanni1234/">Paul Giovanni</a>
      </div>
    </div>
 </div>
 <div class="drop-button"><img id="instagram" src="images/instagram"></div>
 <div class="drop-button"><img id="youtube" src="images/youtube"></div>
</div>

CSS:

    .drop-container {

  position: relative;
  display: inline-block;

}

.drop-button:hover, .dropbtn:focus {

  background-color: aquamarine;

}

.drop-button {

  border: none;
  cursor: pointer;
  display: inline;

}

.drop-menu {

  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;

}

.drop-menu a {

  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;

}

.show {display:block;}

Javascript

function myFunction() {
    document.getElementsByClassName("drop-menu").classList.toggle("show");
  }
  
  // Close the dropdown menu if the user clicks outside of it
  window.onclick = function(event) {
    if (!event.target.matches('.drop-button')) {
      var dropdowns = document.getElementsByClassName("drop-menu");
      var i;
      for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
  }

这是页面的图片：

Center top social media links

Answer 1

看起来有两点不对。

您的 myFunction 没有正确选择下拉菜单。以下应该有效。

function myFunction() {
  document.querySelector(".drop-menu").classList.toggle("show");
}

您的 window.onclick 函数需要调整以在显示时包含目标下拉菜单。查看代码中的注释。

window.onclick = function(event) {
  // only the below line was updated
  if (event.target.contains(document.querySelector('.drop-menu.show'))) {
    var dropdowns = document.getElementsByClassName("drop-menu");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

Answer 2

我决定把js拿出来做普通的css.....

HTML:

 <div id="dropf" class="drop">
 <img id="facebook" src="images/facebook">
    <a class="links" href="https://www.facebook.com/30luv_-110625097180857/">30luv_</a>
    <a class="links" href="https://www.facebook.com/pgiovanni1234/">Paul G</a></button>
  </div>
  <div id="dropi" class="drop">
    <img id="instagram" src="images/instagram">
    <a class="links" href="https://www.instagram.com/30luv_/">30luv_</a>
    <a class="links" href="https://www.instagram.com/paulgiovanniguitar">Paul G</a>
  </div>
  <div id="dropy" class="drop">
    <img id="youtube" src="images/youtube">
    <a class="links" href="https://www.youtube.com/channel/UCQHhVyq8BGRc1-IAEKFQGXw">30luv_</a>
    <a class="links" href="https://www.youtube.com/channel/UCGtfQ6n5mCQrnNHtN-U8zbA">Paul G</a>
  </div>

CSS:

.drop:hover > .links {

    display: block;

}

这使得当您将鼠标悬停在它上面时，链接会出现...w/o javascript。抱歉，只是更改一下。

通过 img 下拉菜单

Drop down menu via img

html

javascript

css

dropdown