Css div：焦点用于转换高度，单击iframe元素可恢复转换

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

以下是我得到的：

.音乐块{ 宽度：350px； 高度：90px； 背景色：bc37ff； 溢出：隐藏； -webkit转换：0.6s； 过渡：0.6s； } .音乐板块：聚焦{ 最大高度：952px； } .音乐块：悬停{ 光标：指针； } 音乐

文本

---

好的，我可以看到两种可能的解决方案，一种是js方式，另一种是css方式可能不止这些，但现在我想到的是：

对于css方式，您需要在标记顶部添加一个输入[tpye='checkbox']和一个标签，使标签具有初始音乐块的高度和宽度，这样您就可以开始了：

对于js方式，当用户单击.music块时，您只需在其上添加一个额外的类，如下所示：

---

我想我更喜欢CSS方法，因为它允许你再次关闭菜单。我很困惑这两者之间的区别，直到我看到你两次链接同一个js小提琴，哈哈，不管是什么原因，这似乎在我的实际网站上不起作用。就我而言，我就是不能让它工作，我不知道我做错了什么！我已经做了你的js小提琴所显示的，但没有运气哦，很抱歉，请继续并再次检查该链接，它现在应该可以正常工作了。如果您尝试了js方法，请确保首先加载jquery库

#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;
}

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