通过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;

}

这样，当您将鼠标悬停在它上面时，链接就会显示出来……没有javascript。抱歉，只需对其进行更改。