javascript - 通过单击整个页面中的图像打开一个 div

Question

我想在我的页面中有一个汉堡包图标，通过点击它，它会在它的正下方打开一个 div。这些汉堡包图标在我的页面中有多个。

如您在我的代码下方所见，我想在单击汉堡包图标时打开它们下方的 class="pop"。

$(document).ready(function() {
  $("#openDrop").click(function() {
     //to be implemented
  });
});

.pop {
  background-color: #555;
  color: #999;
  height: 125px;
  width: 80px;
  visibility: hidden;
  text-align:center;
}

<div class="pop">
  <br/>
  
    <div>Mark
      <br/>
      <br/>ReshaD
      <br/>
      <br/>Thomas
      <br/>
    </div>
  
  <br/>
</div>

<img id="openDrop1" src="http://s24.postimg.org/yalcvye1t/hamburger.png" style="position: relative; left: 170px; top:-70px;  cursor: pointer;">

<img id="openDrop2" src="http://s24.postimg.org/yalcvye1t/hamburger.png" style="position: relative; left: 300px; top:-70px; cursor: pointer;">

有什么解决办法吗？ 提前致谢。

Working jsFiddle

Answer 1

修复了你的 fiddle ..

https://jsfiddle.net/07nfsx07/9/

基本上您可以自己完善它，但这里是您想要的一般要点。

$(document).ready(function(){
    $(".openDrops").click(function(){
       x = $(this).offset().top + 20 + 'px';
       y =$(this).offset().left + 20 + 'px';
       $('.pop').css('top', x).css('left', y).show();
    });
});

还稍微更改了您的 CSS:

  display:none;
  position: absolute;

和你的 HTML

<img id="openDrop1" class="openDrops" src="http://s24.postimg.org/yalcvye1t/hamburger.png" style="position: relative; left: 170px; cursor: pointer;">

<img id="openDrop2" class="openDrops" src="http://s24.postimg.org/yalcvye1t/hamburger.png" style="position: relative; left: 300px; cursor: pointer;">