Question

我试图让我的网站在点击时有下拉div，允许你检查div中的内联小部件。但是，iframe和其他不严格图像的元素会导致div转换回原始状态，导致菜单崩溃，就好像用户点击了div区域一样。

这是我得到的：

＆＃13;

.music-block {
  width: 350px;
  height: 90px;
  background-color: #bc37ff;
  overflow: hidden;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}
.music-block:focus {
  max-height: 952px;
}
.music-block:hover {
  cursor: pointer;
}

＆＃13;

<div class="music-block" tabindex="1">
  <p>
    <h1>MUSIC</h1>
  </p>
  Text.
</div>
<p>
  <iframe style="border: 0; width: 350px; height: 654px;" src="https://bandcamp.com/EmbeddedPlayer/album=3599654224/size=large/bgcol=ffffff/linkcol=7137dc/transparent=true/" seamless><a href="http://toothbops.bandcamp.com/album/toothbops-ep" target="_blank">toothbops - EP by toothbops</a>
  </iframe>
</p>
</div>

＆＃13;

以下是单击iframe时菜单折叠的含义示例（在本例中为bandcamp小部件）：http://jsfiddle.net/6m52jxtj/

Answer 1

好的，我可以看到你的问题有两个可行的解决方案，一个js方式和一个css方式（可能还有更多，但现在想到这一点:)）

对于 css 方式，您需要在标记顶部添加input[tpye='checkbox']和label，制作标签的高度和宽度最初的音乐块，你很高兴：check out the js fiddle

#trigger-music-block{
    display: none;
}
#trigger-music-block + label{
    position: absolute;
    top: 0; left: 0;
    height: 90px; width: 350px;
    cursor: pointer;
}
#trigger-music-block:checked + label + .music-block{
    height: 952px;
}

对于 js 方式，您可以在用户点击它时在.music-block上添加额外的类，如下所示： check out js fiddle

$('.music-block').click(function(){
    $(this).addClass('expanded');
});

div：焦点用于过渡高度，单击iframe元素可以恢复过渡

1 个答案: