Question

我希望在我的页面中有一个汉堡包图标，然后通过点击它，它会在它下面打开一个div。这些汉堡包图标在我的页面中是多个。

正如您在我的代码下方看到的那样，我想在点击它们时打开汉堡包图标下面的class="pop"。

＆＃13;

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

＆＃13;

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

＆＃13;

<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;">

＆＃13;

是否有任何解决方案才能这样做？提前谢谢。

Working jsFiddle

Answer 1

修正了你的小提琴......

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

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

  display:none;
  position: absolute;

还改变了你的CSS：

<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;">

和你的HTML

{{1}}

通过点击整页中的图片来打开div

1 个答案: